mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 21:29:31 +08:00
feat: 图库支持左右滑动
This commit is contained in:
小莫唐尼
@@ -0,0 +1,18 @@
|
||||
## 1.0.2（2023-09-14）
|
||||
更新使用文档：
|
||||
引入本插件 然后使用，手动滑稽，教程简单吗？
|
||||
<k-touch-listen @touchUp="touchUp" @touchDown="touchDown" @touchLeft="touchLeft" @touchRight="touchRight">
|
||||
<view>
|
||||
//您需要监听的区域的代码
|
||||
</view>
|
||||
</k-touch-listen>
|
||||
## 1.0.1（2023-09-14）
|
||||
更新使用文档：
|
||||
引入本插件 然后使用，手动滑稽，教程简单吗？
|
||||
<k-touch-listen @touchUp="touchUp" @touchDown="touchDown" @touchLeft="touchLeft" @touchRight="touchRight">
|
||||
<view>
|
||||
//您需要监听的区域的代码
|
||||
</view>
|
||||
</k-touch-listen>
|
||||
## 1.0.0（2023-09-14）
|
||||
首次提交
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="touch-box" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'k-touch-listen',
|
||||
data() {
|
||||
return {
|
||||
touchStartX: 0, // 触摸时的原点
|
||||
touchStartY: 0, // 触摸时的原点
|
||||
time: 0, // 时间记录，用于滑动时且时间小于1s则执行左右滑动
|
||||
interval: '', // 记录/清理时间记录
|
||||
touchMoveX: 0, // x轴方向移动的距离
|
||||
touchMoveY: 0, // y轴方向移动的距离
|
||||
touchMoveTag: false // 定义滑动状态
|
||||
}
|
||||
},
|
||||
props: {
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'all'
|
||||
},
|
||||
distance: {
|
||||
type: [String, Number],
|
||||
default: 30
|
||||
}
|
||||
},
|
||||
emits: ['touchUp', 'touchDown', 'touchLeft', 'touchRight'],
|
||||
methods: {
|
||||
// 触摸开始事件
|
||||
touchStart(e) {
|
||||
this.touchStartX = e.touches[0].pageX // 获取触摸时的原点
|
||||
this.touchStartY = e.touches[0].pageY // 获取触摸时的原点
|
||||
// 使用js计时器记录时间
|
||||
this.interval = setInterval(() => {
|
||||
this.time++
|
||||
}, 100)
|
||||
},
|
||||
// 触摸移动事件
|
||||
touchMove(e) {
|
||||
this.touchMoveTag = true
|
||||
this.touchMoveX = e.touches[0].pageX
|
||||
this.touchMoveY = e.touches[0].pageY
|
||||
},
|
||||
ressetData() {
|
||||
this.touchStartX = 0 // 触摸时的原点
|
||||
this.touchStartY = 0 // 触摸时的原点
|
||||
this.time = 0 // 时间记录，用于滑动时且时间小于1s则执行左右滑动
|
||||
this.interval = '' // 记录/清理时间记录
|
||||
this.touchMoveX = 0 // x轴方向移动的距离
|
||||
this.touchMoveY = 0 // y轴方向移动的距离
|
||||
this.touchMoveTag = false // 定义滑动状态
|
||||
},
|
||||
// 触摸结束事件
|
||||
touchEnd(e) {
|
||||
let moveX = this.touchMoveX - this.touchStartX
|
||||
let moveY = this.touchMoveY - this.touchStartY
|
||||
if (Math.sign(moveX) == -1) {
|
||||
moveX *= -1
|
||||
}
|
||||
if (Math.sign(moveY) == -1) {
|
||||
moveY *= -1
|
||||
}
|
||||
if (2 * moveX <= moveY && this.touchMoveTag) {
|
||||
// 上下
|
||||
if (this.direction != 'all' && this.direction != 'vertical') return
|
||||
// 向上滑动
|
||||
if (
|
||||
this.touchMoveY - this.touchStartY <= -this.distance &&
|
||||
this.time < 10
|
||||
) {
|
||||
this.$emit('touchUp')
|
||||
}
|
||||
// 向下滑动
|
||||
if (
|
||||
this.touchMoveY - this.touchStartY >= this.distance &&
|
||||
this.time < 10
|
||||
) {
|
||||
this.$emit('touchDown')
|
||||
}
|
||||
} else if (moveX > 2 * moveY && this.touchMoveTag) {
|
||||
// 左右
|
||||
if (this.direction != 'all' && this.direction != 'horizontal') return
|
||||
// 向左滑动
|
||||
if (
|
||||
this.touchMoveX - this.touchStartX <= -this.distance &&
|
||||
this.time < 10
|
||||
) {
|
||||
this.$emit('touchLeft')
|
||||
}
|
||||
// 向右滑动
|
||||
if (
|
||||
this.touchMoveX - this.touchStartX >= this.distance &&
|
||||
this.time < 10
|
||||
) {
|
||||
this.$emit('touchRight')
|
||||
}
|
||||
}
|
||||
clearInterval(this.interval) // 清除setInterval
|
||||
this.ressetData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.touch-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "k-touch-listen",
|
||||
"displayName": "k-touch-listen 手势监听 全面兼容小程序、vue2、vue3等多端",
|
||||
"version": "1.0.2",
|
||||
"description": "用于监听用户滑动手势，左滑右滑，上滑下滑等一系列手势监听",
|
||||
"keywords": [
|
||||
"touch",
|
||||
"手势",
|
||||
"手势监听",
|
||||
"手势监听",
|
||||
"vue3"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.7.6"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user