功能介绍
- 该功能就是使用小程序的触摸事件，这些事件，可以绑定到view中操作
bindtouchstart="touchStart" //手指触摸动作开始
bindtouchend="touchEnd" //手指触摸动作结束
bindtouchcancel="touchCancel" //手指触摸动作被打断，如来电提醒，弹窗
bindtouchmove="touchmove" //手指触摸后移动
bindlongtap="longtap" //手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror="error" //当发生错误时触发 error 事件，detail = {errMsg}
滑动效果主要使用了，开始、移动、结束这三个事件。
- 触摸开始: 时获取当前触摸的模块的下标以及起始距离
- 移动过程中获取每次移动的距离差并赋值到data保存数据，这样就有了移动效果
- 触摸结束时判断保存的数据，大于我们预期的就改为我们预期的，小于我们预期的就改为最小值（0)我是设为0
代码模块
- 模板
<view class="per-row" style="background-color: #f8f9fd;">
<view class="per-info-items"wx:for="{{visitList}}" wx:key="id"
bindtouchstart="touchStart"
bindtouchend="touchEnd"
bindtouchcancel="touchCancel"
bindtouchmove="touchmove"
data-index="{{index}}"
>
<view class="info" style="transform:translateX({{item.left+'rpx'}});"> #这个样式是控制整体模块移动的
<view class="info-top" style="width:480rpx;position:relative;padding-bottom:40rpx;">
<view class="info-center" style="font-size:30rpx;margin-right:25rpx;display: block;" >
{{item.content}}
</view>
<view class="info-bottom" style="position:absolute;bottom:0;">
<text class="time" style="font-size: 24rpx;color:#666;">走访时间：{{item.create_time}}</text>
</view>
</view>
<view data-index="{{index}}" catchtap="delItem" class="inner del">删除</view>
</view>
</view>
</view>
- 样式
.del{
width: 160rpx;
height: 160rpx;
text-align: center;
line-height: 160rpx;
background-color: red;
position: absolute;
right: -160rpx;
border-radius: 15rpx;
}
- 逻辑
data: {
visitList:[],
Mstart:'',
More:'',
Mend:'',
Mindex:'',
sub:2
},
/**
* 触摸开始事件，初始化startX、startY和startTime
*/
touchStart: function (e) {
this.setData({
Mstart:e.changedTouches[0].pageX, //开始距离
Mindex:e.currentTarget.dataset.index //当前点击的那条数据
})
},
/**
* 滑动
*/
touchmove(e){
const that = this
let moreL = this.data.Mstart - e.changedTouches[0].pageX //计算滑动距离
let list = this.data.visitList
let Mindex = this.data.Mindex //点击时，赋值到data中的当前下标，现在取出来操作
//在触摸结束后，数据存储的等于-160时，将执行这里的判断，-160就说明按钮已经是拉出的了，所以要开始拉回去
if (this.data.flag) {
// 存储的距离减去滑动的距离，由于距离比较大，想让它慢一点回去，所以这里做处理，sub每次滑动都会自增
list[Mindex].left = list[Mindex].left - (moreL / this.data.sub)
this.setData({
visitList:list,
sub: this.data.sub+1 //sub每次滑动都会自增，在触摸接触后，重新把它赋值为2
})
return false //return false只会执行这里的代码，下面的不执行
}
list[Mindex].left = -moreL //如果是向左拉就是拉出来按钮，所以无需限制，尽管让他赋值，在触摸结束后做判断即可
this.setData({
visitList:list
})
},
/**
* 触摸结束事件，主要的判断在这里
*/
touchEnd: function (e) {
let list = this.data.visitList //渲染的数组，这里是用来存储修改数据用
let lastMore = this.data.Mstart - e.changedTouches[0].pageX //最终的距离
list[this.data.Mindex].left = lastMore >= 50?-160:0 //利用只要距离大于等于50就可以把它全部拉出来了，否则为0
this.setData({
visitList:list, //修改了数据就需要把它重新赋值
sub:2 //这是为了给触摸滑动时，做限制用的
})
//这里判断当left是-160的就说明按钮已经是拉出来的，这里需要赋值是为了我们做上面的操作
if (list[this.data.Mindex].left == -160) {
this.setData({
flag:true
})
return false
}
},
复制代码可能是无法运行的，这里只是讲解一下
