基于vue2写的左滑删除

来源：互联网发布：日本学校现代网络神曲编辑：程序博客网时间：2024/06/08 06:14

左滑删除，很多UI框架里有，比如Mint-UI， Muse-UI等，一开始我们就是用的这两个，但是我们需求是要：左滑的时候出现img然后来实现点击删除，如下：

因为用UI框架，还得改底层代码= =所以，我们小组就直接写了一个- -，心累……此组件多地方使用，所以建议还是放到common下。。

<template>    <div class="left-delete">        <div class="move"             @touchstart="_touchStart"             @touchmove="_touchMove"             @touchend="_touchEnd"             :style="txtStyle">            <slot></slot>        </div>        <div class="deleteIcon" :style="zIndex"  @click.prevent="deleteItem(index)"></div>    </div></template><script>    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);            }        }    }</script><style>    .left-delete{        width:100%;        height:100%;        position:relative;        z-index:2;    }    .move{        position: relative;    }    .deleteIcon{        width: 2rem;        height:100%;        position: absolute;        right:0;        top:0;        background:url(./../../assets/main/4.png) no-repeat;        background-size: contain;    }</style>

然后哪个页面需要，哪个页面引入就好。比如myCollect页面需要，那么如下：

<template>    <section class="myCollect"><section>            <div v-for="(item,index) in collectionList">                <left-slider :index="index" @deleteItem="deleteItem">                    <Financial :item="item" :index="index"></Financial>                </left-slider>            </div>        </section>    </section></template><script>    import api from './../../fetch/api';    import { mapGetters } from 'vuex';    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: {        // 删除        deleteItem: function(index) {            api.commonApi('后台接口，请求数据')//此处api是封装的axios，详情看文章：vue2+vuex+axios即可                    .then(res => {                console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);            this.collectionList.splice(index, 1);        });        }    },    mounted() {    }    }</script>

然后就完成了。。。如果有更好的，希望您能不吝啬来教我#99

3 0