介绍, lt; !——这是一个项目的代码比;
,,,lt; view 类=癮ddress-item",天气:为=皃w_addressList",在
,,,lt; !——这里绑定了刚才说的3个函数分别为,触动,touchM touchE——比;
,,,lt; !——这里注意这个,风格=皃w_item.txtStyle",,这是我们一会再js中,将要设置的样式,——比;
,,,,lt; view 风格=皃w_item.txtStyle", bindtouchstart=皌ouchS", bindtouchmove=皌ouchM", bindtouchend=皌ouchE",材料指数=皃w_index",类=癮ddress-item-top",在
,,,,,lt; !——中间无关的代码已被我删除——比;
,,,,lt;/view>
,,,,,lt; !——这里是左滑按钮部分——开始——比;
,,,,lt; view bindtap=癲elItem",类=皃osit"比;
,,,,,,lt; view 类=癳ditor", data-addressid=皃w_item.address.ID", catchtap=皊etDefaultAddress"在设为默认地址,lt;/view>
,,,,,,lt; view 类=癲el", data-addressid=皃w_item.address.ID",材料指数=皃w_index", catchtap=癲elAddress"在删除,lt;/view>
,,,,lt;/view>
,,,,,lt; !——这里是左滑按钮部分——最终——比;
,,,lt;/view> 页面({
,数据:{
地址列表才能:[{“Contact":“钟诚“,“Mobile": 13888888888,“Address":“江苏省苏州市工业园区创意产业园“},
{“Contact":“凹凸曼“,“Mobile": 13666666666,“Address":“江苏省苏州市工业园区独墅湖体育馆“},
{“Contact":“图傲曼“,“Mobile": 13666666666,“Address":“江苏省苏州市工业园区独墅湖体育馆“}),
editIndex才能:0,
delBtnWidth才能:150//删除按钮宽度单位(rpx)
},
,onLoad:功能(选项){},
,//手指刚放到屏幕触发
,触动:函数(e) {
console.log才能(“touchS" + e);//才能判断是否只有一个触摸点
如果才能(e.touches.length==1) {
,,this.setData ({
,,,//记录触摸起始位置的X坐标
,,,startX: e.touches [0] .clientX
,,});
,,}
},
,//触摸时触发,手指在屏幕上每移动一次,触发一次
,touchM:函数(e) {
,,console.log (“touchM:“+ e);
var 才能;that =,
如果才能(e.touches.length==1) {
,,//记录触摸点位置的X坐标
,,var moveX =, e.touches [0] .clientX;
,,//计算手指起始点的X坐标与当前触摸点的X坐标的差值
,,var disX =, that.data.startX 作用;moveX;
,,//delBtnWidth 为右侧按钮区域的宽度
,,var delBtnWidth =, that.data.delBtnWidth;
,,var txtStyle =,““
,,如果(disX ==, 0, | |, disX , lt;, 0){//如果移动距离小于等于0,文本层位置不变
,,,txtStyle =,“左:0 px";
,,}else 如果(祝辞disX 0,){//移动距离大于0,文本层左值等于手指移动距离
,,,txtStyle =,“左:产生绯闻;+ disX +“px";
,,,如果(disX>=delBtnWidth) {
,,,,//控制手指移动距离最大值为删除按钮的宽度
,,,,txtStyle =,“左:产生绯闻;+ delBtnWidth +“px";
,,,}
,,}
,,//获取手指触摸的是哪一个项目
,,var index =, e.currentTarget.dataset.index;
,,var list =, that.data.addressList;
,,//将拼接好的样式设置到当前项目中
,,列表(指数).txtStyle =, txtStyle;,
,,//更新列表的状态
,,this.setData ({
,,地址列表:列出
,,});
,,}
},
,touchE:函数(e) {
,,console.log (“touchE" + e);
var 才能;that =,
如果才能(e.changedTouches.length==1) {
,,//手指移动结束后触摸点位置的X坐标
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关微信小程序如何实现向左滑动删除效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
先看效果
由于比较简单,所以直接上代码了,详细的讲解都在代码的注释中,首先看下页面的布局
再看js代码
