weex列表侧滑删除
设计图：
这个页面是前段时间一个weex项目中的需求，最近比较闲，复盘一下。
第一个需要注意的地方是：
<list> 标签内部使用<cell>标签的时候，在<cell>标签内部 margin属性设置值无效！（以下截取自官方文档）
所以，我们需要对<list>标签设置margin-left属性，让其居中展示，（在Vue里面，所有的手机屏宽都是750px,所以我们可以直接把宽度写死）
第一版效果：
有了上面这个效果，接下来，我们需要考虑几个东西：
1，条目的真实宽度是多少？
这里我们采用最简单的方法，把每个Item的宽度都加宽一个删除按钮的宽度，默认显示的时候放在条目最右边的屏幕之外；
2，如何让条目知道我们触摸的方向，并响应？
查看weex官方文档关于手势事件的解决方案（https://weex.apache.org/zh/docs/events/gesture.html#手势类型）发现最好的处理方式是使用Swipe来处理我们的左右滑动事件。
3，如何响应我们监听到的手势事件，使条目显示出设计图上的删除效果？
其实这里左滑出现删除，就是捕获到手势事件之后，判断为左滑就让当前条目向左做平移动画，反之同理。
下面是效果图：
压缩之后导致画质不佳！！
以下代码可以直接copy运行，注意，运行此代码必须在weex开发环境下！
<template>
<div style="flex:1;width: 750px; background-color: #F7F7F7">
<div style="height: 100px; width: 750px; background-color: #0094ff; justify-content: center">
<text style="font-size: 40px;color: cornsilk; margin-left: 30px">侧滑deom</text>
</div>
<list style="flex: 1; width: 710px; margin-left: 20px;">
<cell v-for="(item,index) in data">
<div style="margin-top: 20px; margin-bottom: 20px; width: 710px; height: 160px; border-radius: 10px; background-color: #ffffff">
<div style="flex-direction: row; width: 870px" ref="itemDev" @swipe="handleSwipe($event,index)">
<div style="justify-content: center; width: 710px; height: 160px; background-color: #ffffff">
<text style="color: #666666; font-size: 30px">{{item}}</text>
</div>
<div style="background-color: #ff0000; width: 160px; height: 160px; justify-content: center; align-items: center" @click="removeItem(index)">
<text style="font-size: 30px; color:#ffffff">删除</text>
</div>
</div>
</div>
</cell>
</list>
</div>
</template>
<script>
const animation = weex.requireModule('animation');
// var modal = weex.requireModule("modal");
export default {
data() {
return {
data:["你好sad海东卡活动IQ我和我去换我前后二环企鹅号前后去武汉",
"时候带合适的话我二哈和和好违和偶尔后期无痕求合区后求问候【美秋无痕哦环球网【偶尔会去【 哦环球网【西偶尔会去【owing",
"时候带合适的话我二哈和和好违和偶尔后期无痕求合区后求问候偶尔会去【 哦环球网【西偶尔会去【owing",
"时候带合适的话我二哈和和好违和偶尔后期无痕求合区后求问候【美秋无痕哦环球网【偶尔会去【 哦环球网【西偶尔会去【啊是的气候都请我喝",
"时候带合适的话我二哈和和好违和偶尔后",
"你好sad海东卡活动IQ我和我去换我前后二环企鹅号前后去武汉",
"时候带合适的话我二哈和和好违和偶尔后期无痕求合区后求问候【美秋无痕哦环球网【偶尔会去【 哦环球网【西偶尔会去【owing",
"时候带合适的话我二哈和和好违和偶尔后期无痕求合区后求问候偶尔会去【 哦环球网【西偶尔会去【owing",
"时候带合适的话我二哈和和好违和偶尔后期无痕求合区后求问候【美秋无痕哦环球网【偶尔会去【 哦环球网【西偶尔会去【啊是的气候都请我喝",
"时候带合适的话我二哈和和好违和偶尔后",
],
//记录当前左滑出来的条目下标
currentIndex:-1,
}
},
methods: {
handleSwipe (e , index) {
if (e.direction == "left") {
this.goLeft(index);
} else if (e.direction == "right"){
this.goRight(index);
}
// modal.toast({message:"==" + e.direction + "==" + index, duration:1});
},
goLeft(index){
let itemEl = this.$refs.itemDev[index];
//第二左滑条目与前一次左滑条目相同时，不处理
if (index == this.currentIndex){
return;
}
//当前有划出的条目的时候，左滑其他条目，当前的条目归位，
if (this.currentIndex != -1){
this.goRight(this.currentIndex);
}
//左滑当前条目
if (this.currentIndex != index){
animation.transition(itemEl,{
styles: {
transform: 'translate(-160px, 0px)',
transformOrigin: 'center center'
},
duration: 200, //ms
timingFunction: 'linear',
delay: 0 //ms
},function () {
});
this.currentIndex = index;
}
},
//time是动画时间，给个默认值 200毫秒，不传就表明这个值为200毫秒
goRight(index,time = 200){
let itemEl = this.$refs.itemDev[index];
animation.transition(itemEl,{
styles: {
transform: 'translate(0px, 0px)',
transformOrigin: 'center center'
},
duration: time, //动画时间
timingFunction: 'linear',//线性运动
delay: 0 //ms
},function () {
});
this.currentIndex = -1;
},
//点击删除
removeItem(index){
this.goRight(index,0);
this.data.splice(index, 1);
}
}
}
</script>
<style space>
</style>
以上demo容易出现的几个坑点：
1，注意有一个<div>宽度设置为870px的，这个870px的宽度必须写死，不然存在滑出来的时候，右边的删除按钮不显示的情况。（目前的解决办法是写死宽度，如有更好的方法，可以下方留言）
2，使用 ref="itemDev" 的时候，在下面的方法中获取对象的时候，如果ref绑定的是单个对象，那么this.$refs.itemDev返回的就是单个对象，如果<div>中使用ref绑定的对象，是通过for循环重复创建的，那么这里的this.refs.itemDev方法返回的就是一个对象集合，此时就可以像以上代码一样使用。
由于本人不是专业前端，所以Vue代码有很多地方不规范的，其实很多Style可以写在下面的<style space></style>内部的。
网友评论