直接进入正题，我们需要做的就是通过手指滑动列表项后，右侧出现删除；
比如说像这样：
向左边滑动后出现如下的效果：
开始撸代码～
假设我们有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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。