相思资源网 Design By www.200059.com
直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除;
比如说像这样:
向左边滑动后出现如下的效果:
开始撸代码~
假设我们有N个列表项来自一个数组list,先确定基本的结构
<view class="list" wx:for="{{list}}" wx:key> <view class="item"> <view class="wrap">{{item}}</view> <view class="delete"><text>删除</text></view> </view> </view>
在item中分别放入wrap作为显示项目内容的容器,与delete删除按钮的容器。
当我们手指向左滑动wrap时,wrap容器向左移动;此时delete从wrap容器之后显示出来;换句话说我们喜欢wrap容器盖住delete,使wrap默认在delete上方。
没错,我们用样式来实现效果。
.item{ position:relative; } .wrap{ position:absolute;z-index:2; top:0;left:0; backgorund:#fff;width:100%;height:100%; } .delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}
好了,这些我们需要的核心样式,为了wrap能100%盖住delete,我们给到它宽高都是百分之百,并且填充背景颜色是必然的,至于要怎么美化可自行添加需要的样式。
基本的结构就到这里了,接下来我们为wrap添加触摸事件;
<view class="wrap" data-index="{{index}}" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' >{{item}}</view>
我们绑定了三个触摸事件,分别是,触摸开始,触摸时移动以及触摸结束。
同时有个wrap添加了data-index="{{index}}" 这样我们就可以确定当前触摸的列表项是哪一个。
接着我们来为他们添加对应的方法。
touchstart:function(e){ this.setData({ index: e.currentTarget.dataset.index, Mstart: e.changedTouches[0].pageX }); }
通过touchstart方法我们将当前触发事件元素的索引保存到index,并且获得当前手指触摸的坐标位置e.changedTouches[0].pageX;
e.changedTouches[0].pageX屏幕的左上角的坐标为(0,0),离左上角的距离越大pageX的值也越大。
下一步,当我们移动手指向左滑动时:
touchmove: function (e) { //列表项数组 let list = this.data.list; //手指在屏幕上移动的距离 //移动距离 = 触摸的位置 - 移动后的触摸位置 let move = this.data.Mstart - e.changedTouches[0].pageX; // 这里就使用到我们之前记录的索引index //比如你滑动第一个列表项index就是0,第二个列表项就是1,··· //通过index我们就可以很准确的获得当前触发的元素,当然我们需要在事前为数组list的每一项元素添加x属性 list[this.data.index].x = move > 0 "htmlcode">touchend: function (e) { let list = this.data.list; let move = this.data.Mstart - e.changedTouches[0].pageX; list[this.data.index].x = move > 100 "_blank" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html" rel="external nofollow" >微信小程序开发尺寸单位文档设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5,1rpx = 0.42px,1px = 2.34rpx
iPhone6,1rpx = 0.5px,1px = 2rpx
iPhone6 Plus,1rpx = 0.552px,1px = 1.81rpx我们看到基本是2倍的比例;
<view class="wrap" style="transform:translateX({{item.x/2}}px);" data-index="{{index}}" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' >{{item}}</view>最后我们使用样式为wrap元素添加过渡效果就基本完成了。
源码地址:https://github.com/749264345/wechat-weapp-map
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序左滑删除功能开发案例详解的评论...