下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】微信小程序如何实现向左滑动删除效果
这篇文章给大家分享的是有关微信小程序如何实现向左滑动删除效果的内容。在下觉得挺实用的,因此分享给大家做个参考,一起跟随在下过来看看吧。先看效果要实现的效果:1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮。思路:1,首先页面每个item分为上下两层,上面一层放置正常内容,下面一层放置左滑显示出的按钮,这个可以使用z-index来实现分层。2,item上层使用绝对定位,我们操纵left属性的值来实现像左移动。3,我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数(touchstart,touchmove,touchend)来实现item随手指移动。由于比较简单,所以直接上代码了,详细的讲解都在代码的注释中,首先看下页面的布局<!--这是一个item的代码>
<view
class="address-item"
wx:for="pw_addressList"
>
<!--这里绑定了刚才说的3个函数分别为
touchS,touchM
touchE-->
<!--这里注意这个
style="pw_item.txtStyle"
,这是我们一会再js中
将要设置的样式
-->
<view
style="pw_item.txtStyle"
bindtouchstart="touchS"
bindtouchmove="touchM"
bindtouchend="touchE"
data-index="pw_index"
class="address-item-top"
>
<!--中间无关的代码已被我删除-->
</view>
<!--这里是左滑按钮部分start-->
<view
bindtap="delItem"
class="posit">
<view
class="editor"
data-addressid="pw_item.address.ID"
catchtap="setDefaultAddress">设为默认地址</view>
<view
class="del"
data-addressid="pw_item.address.ID"
data-index="pw_index"
catchtap="delAddress">删除</view>
</view>
<!--这里是左滑按钮部分end-->
</view>再看js代码Page({
data:{
addressList:[{"Contact":"钟诚","Mobile""Address":"江苏省苏州市工业园区创意产业园"},
{"Contact":"凹凸曼","Mobile""Address":"江苏省苏州市工业园区独墅湖体育馆"},
{"Contact":"图傲曼","Mobile""Address":"江苏省苏州市工业园区独墅湖体育馆"}],
editIndex:0,
delBtnWidth:150//删除按钮宽度单位(rpx)
},
onLoad:function(options){},
//手指刚放到屏幕触发
touchS:function(e){
console.log("touchS"+e);
//判断是否只有一个触摸点
if(e.touches.length==1){
this.setData({
//记录触摸起始位置的X坐标
startX:e.touches[0].clientX
});
}
},
//触摸时触发,手指在屏幕上每移动一次,触发一次
touchM:function(e){
console.log("touchM:"+e);
var
that
=
this
if(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
=
"";
if(disX
==
0
||
disX
<
0){//如果移动距离小于等于0,文本层位置不变
txtStyle
=
"left:0px";
}else
if(disX
>
0
){//移动距离大于0,文本层left值等于手指移动距离
txtStyle
=
"left:-"+disX+"px";
if(disX>=delBtnWidth){
//控制手指移动距离最大值为删除按钮的宽度
txtStyle
=
"left:-"+delBtnWidth+"px";
}
}
//获取手指触摸的是哪一个item
var
index
=
e.currentTarget.dataset.index;
var
list
=
that.data.addressList;
//将拼接好的样式设置到当前item中
list[index].txtStyle
=
txtStyle;
//更新列表的状态
this.setData({
addressList:list
});
}
},
touchE:function(e){
console.log("touchE"+e);
var
that
=
this
if(e.changedTouches.length==1){
//手指移动结束后触摸点位置的X坐标
var
endX
=
e.changedTouches[0].clientX;
//触摸开始与结束,手指移动的距离
var
disX
=
that.data.startX
-
endX;
var
delBtnWidth
=
that.data.delBtnWidth;
//如果距离小于删除按钮的1/2,不显示删除按钮
var
txtStyle
=
disX
>
delBtnWidth/2
?
"left:-"+delBtnWidth+"px":"left:0px";
//获取手指触摸的是哪一项
var
index
=
e.currentTarget.dataset.index;
var
list
=
that.data.addressList;
list[index].txtStyle
=
txtStyle;
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024-2030年中国绿豆市场供需前景分析及未来营销策略动态调研研究报告
- 2024-2030年中国粘胶泥行业运营态势预测及竞争力深度研究研究报告
- 2024-2025学年昭通市威信县数学三年级第一学期期末经典试题含解析
- 2024-2025学年运城市新绛县六年级数学第一学期期末考试模拟试题含解析
- 2024-2025学年玉屏侗族自治县数学六上期末达标测试试题含解析
- 2024-2025学年宜宾市翠屏区四年级数学第一学期期末统考试题含解析
- 2024-2025学年邢台市邢台县数学四年级第一学期期末监测试题含解析
- 2024-2025学年新疆乌鲁木齐市头屯河区四上数学期末统考模拟试题含解析
- 技术部个人工作总结
- 2024-2025学年西安市阎良区四上数学期末综合测试试题含解析
- 宿迁市住房公积金管理中心
- 胎儿血液循环与先心
- 经营高危险性体育项目(游泳)申请表
- 医疗器械销售记录表
- 离合器摩擦片瞬态摩擦生热有限元分析研究
- 无生上课模板
- 化妆品经营企业质量管理制度
- 外贸委托付款协议书模板(中英文版)
- 阅读社团教案
- “三重一大”制度落实方面存在的问题及对策建议
- 飞行器隐身技术
评论
0/150
提交评论