微信小程序左滑出现菜单,https://download.csdn.net/download/qq_38880700/11856487
实现步骤
- 布局采用绝对定位,通过left的偏移位置进行菜单的出现和隐藏;
- 捕捉touch事件,对左滑右滑进行处理。
代码
布局 ,初次进入时默认类名为 “content-scroll-text” 的view标签 宽度为100%;向左偏移为0,类名为"content-scroll-bt"的按钮宽度为0,左偏移为100%
<view class="content1">
<view class="content-scroll">
<view class="content-scroll-text" style="left:{{_leftTxt}};width:calc(100% - {{_leftTxt}})" catch:touchstart="_touchstart" catch:touchend="_touchend">
不实心不---------------------------------------1。
</view>
<view class="content-scroll-bt" style="left:calc(100% - {{_leftBt}}) ; width:{{_leftBt}}" bindtap="shanchu">
<view class="content-scroll-bt-shanchu">删除</view>
</view>
</view>
</view>
逻辑,对左滑右滑进行绑定监听,对小于10的不做处理
// components/slide-item/slide-item.js
Page({
/**
* 组件的初始数据
*/
data: {
_start: 0,
_leftTxt: '0px',
_leftBt: '0px',
scrollFlag: false
},
//按下事件
_touchstart(e) {
this.setData({
_start: e.changedTouches[0].pageX
})
},
//按下结束事件
_touchend(e) {
let _end = e.changedTouches[0].pageX;
if (_end > this.data._start) {
console.log("右滑");
if (_end - this.data._start <= 10) {
console.log("右滑幅度小,不触发事件");
} else {
if (this.data.scrollFlag) { //当删除出现时进行复原
console.log("右滑事件触发,并且进行复原");
this.setData({
_leftTxt: "0px",
_leftBt: "0px"
})
}
}
} else {
if (this.data._start - _end <= 10) {
console.log("左滑幅度小,不触发事件");
} else {
console.log("左滑事件触发");
this.setData({
_leftTxt: "-80px",
_leftBt: "80px",
scrollFlag: true
})
}
}
},
shanchu() {
wx.showToast({
title: '删除',
icon: 'success',
duration: 2000
})
}
})
demo下载地址