简言
Vue.js是一个轻量级的JavaScript框架，广泛用于构建用户界面。它提供了一套丰富的指令，帮助开发者快速构建交互式的Web应用程序。本文将介绍个人使用的滑动指令，并解释它们的用法和功能。大家可以根据具体的需求，并结合其他Vue特性和功能来实现更复杂的交互效果。
Vue指令的优点
- 简洁明了：Vue指令以v-开头，后跟指令名称，如v-bind、v-on等，语法简洁，易于理解和使用。
- 方便快捷：Vue指令可以快速创建和管理DOM元素，并且可以方便地绑定事件处理函数，大大减少了手动编写HTML和JavaScript代码的工作量。
- 响应式：Vue指令具有响应性，当数据发生变化时，指令会自动更新相关的DOM元素，无需手动更新页面。
- 可组合性：Vue指令可以组合使用，实现更复杂的功能。例如，可以使用v-bind指令绑定一个CSS样式对象，实现动态的样式修改。
- 自定义性：Vue指令可以自定义指令选项，通过定义指令的参数、更新、钩子等函数，实现自定义指令功能，满足项目对Vue指令的特殊需求。
代码解析三步走
- 函数接收一个dom元素和一个回调函数
- 监听触摸开始、结束，拿到期望的值
- 给个触发条件，上下/左右3或者触摸时间
var timer = null
// 写一个函数 接收一个dom元素和一个回调函数
function touchmove(dom, callback) {
//起始
let startX;
let startY;
let startTime;
// 结束
let endX;
let endY;
let endTime;
// 移动
let moveX;
let moveY;
let moveTime;
// 监听触摸开始
dom.addEventListener("touchstart", (e) => {
// 获取开始触摸的时间 X和Y的位置
startTime = new Date().getTime();
startX = Math.round(e.touches[0].screenX);
startY = Math.round(e.touches[0].screenY);
},);
// 监听触摸结束
dom.addEventListener("touchend", (e) => {
// 结束触摸时间 X和Y离开的位置
endTime = new Date().getTime();
endX = Math.round(e.changedTouches[0].screenX);
endY = Math.round(e.changedTouches[0].screenY);
// 算一下触摸的 上下/左右 的距离
moveX = startX - endX;
moveY = startY - endY;
moveTime = endTime - startTime;
// 给个条件 上下/左右30px或者触摸时间超过 500ms
if (Math.abs(moveY) > 30 || Math.abs(moveX) > 30 || moveTime > 500) {
// 判断方向 触发回调函数并把数据对象传回
if (Math.abs(moveX) > Math.abs(moveY)) {
//左右
moveX > 0
? callback({ direction: "right", to: 'left', value: moveX })
: callback({ direction: "left", to: 'right', value: Math.abs(moveX) });
} else {
//上下
moveY > 0
? callback({ direction: "down", to: 'up', value: moveY })
: callback({ direction: "up", to: 'down', value: Math.abs(moveY) });
}
}
},);
}
export default {
mounted(el) {
touchmove(el, (e) => {
// 从右往左滑动
if (e.to === 'left') {
el.style.transform = `translateX(-${60}px)`;
el.style.transition = `all 0.1s ease-in-out`;
// 监听删除按钮元素的点击事件
el.childNodes[2].addEventListener('click', () => {
showHide()
})
// 超过五秒不点击 隐藏
timer = setTimeout(() => {
el.style.transform = `translateX(${0}px)`;
el.style.transition = `all 0.1s ease-in-out`;
}, 5000)
}
// 从左往右滑动
if (e.to === 'right') {
showHide()
}
// 清除定时器 隐藏删除按钮
function showHide() {
// 清除定时器
clearTimeout(timer)
el.style.transform = `translateX(${0}px)`;
el.style.transition = `all 0.1s ease-in-out`;
}
})
}
}效果展示
- 左滑出现删除按钮，右滑隐藏
- 左滑超过五秒没点击自动隐藏
- 左滑并点击后触发隐藏
以上就是左滑指令的 demo，仅提供思路
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
