左滑删除，很多UI框架里有，比如Mint-UI， Muse-UI等，一开始我们就是用的这两个，但是我们需求是要：左滑的时候出现img然后来实现点击删除，如下：
因为用UI框架，还得改底层代码= =所以，我们小组就直接写了一个- -，心累……此组件多地方使用，所以建议还是放到common下。。
@H_301_16@
export default {
props: {
index: Number
},data() {
return {
startX: 0,//触摸位置
moveX: 0,//滑动时的位置
disX: 0,//移动距离
txtStyle: '',delWidth: 200,top: '',zIndex: 'z-index:-1',}
},methods: {
_touchStart: function(ev) {
ev = ev || event;
if(ev.touches.length == 1){
// 手指按下的时候记录按下的位置
this.startX = ev.touches[0].clientX;
console.log(this.startX)
}
},_touchMove: function(ev) {
ev = ev || event;
if(ev.touches.length == 1) {
// 滑动过程中的实时位置
this.moveX = ev.touches[0].clientX
// 滑动过程中实时计算滑动距离
this.disX = this.startX - this.moveX;
// console.log('disX==>',this.disX)
// 如果是向右滑动或者只是点击，不改变滑动位置
if(this.disX < 0 || this.disX == 0) {
// console.log('没有移动');
this.txtStyle = "transform:translateX(0rem)";
}else if (this.disX > 0) {
如果是向左滑动，则实时给这个根元素一个向左的偏移-left，当偏移量到达固定值delWidth时，固定元素的偏移量为 delWidth
this.txtStyle = "transform:translateX(-" + this.disX/100 + "rem)";
if (this.disX >= this.delWidth/100) {
this.txtStyle = "transform:translateX(-" + this.delWidth/100 + "rem)";
this.zIndex = "z-index:" + 10 + "rem";
}
}
}
},_touchEnd: function(ev) {
if (event.changedTouches.length == 1) {
this.startX = 0;
this.zIndex = "z-index:" + -1 + "rem";
console.log(event.changedTouches[0].clientX)
// 手指移动结束后的水平位置
let endX = event.changedTouches[0].clientX;
// 触摸开始与结束,手指移动的距离
this.disX = this.startX - endX;
//如果距离小于删除按钮的1/2，不显示删除按钮
}
},deleteItem: function(index) {
this.$emit('deleteItem',index);
}
}
}
然后哪个页面需要，哪个页面引入就好。比如myCollect页面需要，那么如下：
import Financial from './../common/financial.vue';
import LeftSlider from './../common/leftSlider.vue';
export default {
name: 'MyCollect',props: {
item: Object,index: Number
},components: {
Financial,LeftSlider
},data() {
return {
}
},created() {
this.getCollectionList();
},methods: {
},computed: {
...mapGetters([
'getContextPathSrc','sessionId','token'
]),},methods: {
// <a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>
deleteItem: function(index) {
api.commonApi('<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>接口，请求数据')//此处api是封装的axios，详情看<a href="/tag/wenzhang/" target="_blank" class="keywords">文章</a>：vue2+vuex+axios即可
.then(res => {
console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
this.collectionList.splice(index,1);
});
}},mounted() {
}
}
然后就完成了。
