uni-app左滑删除

基于uni-app实现列表左滑出现删除按钮功能
效果图如下

jianshu.png

html部分如下：

<view class="member-list-li clearfix" v-for="(item,index) in result" v-else>
            <view class="touch-list list-touch clearfix" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :data-index="index" :style="item.txtStyle" @click="goDetail(item.user_id)">
                <view class="member-box clearfix">
                    <view class="member-title name">{{item.name}}</view>
                    <view class="member-title phone">{{item.mobile}}</view>
                </view>
                <view class="member-box"> 
                    <view class="member-cardno">{{item.member_cz_card_info.card_no}}</view>
                </view>
                <view class="member-box clearfix">
                    <!-- <button class="btn-unbind" @click="deleteMember(item.user_id)" @click.stop>删除</button> -->
                    <button class="btn-unbind" v-if="item.user_wechat!=null" @click="unBind(item.user_id)" @click.stop>解绑</button>
                    <button class="btn-unbind" @click="goUpdate(item.user_id)" @click.stop>更新</button>
                    <button class="btn-charge" v-if="item.member_cz_card_info" @click="goRecharge(item.user_id,item.name,item.mobile,item.member_cz_card_info.id,item.member_cz_card_info.name)" @click.stop>充值</button>
                </view>
            </view>
            <view class="touch-list list-delete" :data-userid="item.user_id" @click= "deleteMember(item.user_id)" >
                删除
            </view>
        </view>

return中定义变量

return {
                // 前台用户标志
                result:[],
                delBtnWidth: 60, //删除按钮宽度单位（rpx）
                startX:'',
            };

相关方法函数如下

           touchS: function (e) {
                // console.log('touchS')
                if (e.touches.length == 1) {
                    //设置触摸起始点水平方向位置
                    this.startX=e.touches[0].clientX
                    // console.log(this.startX)
                }
            },
            touchM: function (e) {
                 // console.log('touchM')
                if (e.touches.length == 1) {
                    //手指移动时水平方向位置
                    var moveX = e.touches[0].clientX;
                    //手指起始点位置与移动期间的差值
                    var disX = this.startX - moveX;
                    var delBtnWidth = this.delBtnWidth;
                    var txtStyle = "";
                    if (disX == 0 || disX < 0) {//如果移动距离小于等于0，说明向右滑动，文本层位置不变
                        txtStyle = "left:0px";
                    } else if(disX > 0){//移动距离大于0，文本层left值等于手指移动距离
                        txtStyle = "left:-" + disX + "px";
                        if (disX >= delBtnWidth) {
                            //控制手指移动距离最大值为删除按钮的宽度
                            txtStyle = "left:-" + delBtnWidth + "px";
                        }
                    }
                    //获取手指触摸的是哪一项
                    var index = e.currentTarget.dataset.index;
                    var list = this.result;
                    list[index].txtStyle = txtStyle;
                    // console.log(list[index].txtStyle)
                    //更新列表的状态
                    this.result=list;
                }
            },
            touchE: function (e) {
                // console.log('touchE')
                if (e.changedTouches.length == 1) {
                    //手指移动结束后水平位置
                    var endX = e.changedTouches[0].clientX;
                    //触摸开始与结束，手指移动的距离
                    var disX = this.startX - endX;
                    var delBtnWidth = this.delBtnWidth;
                    //如果距离小于删除按钮的1/2，不显示删除按钮
                    var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
                    //获取手指触摸的是哪一项
                    var index = e.currentTarget.dataset.index;
                    var list = this.result;
                    list[index].txtStyle = txtStyle;
                    // console.log(list[index].txtStyle)
                    //更新列表的状态{
                    this.result=list
                }
            },
            //点击删除按钮事件
            delItem: function (e) {
                //获取列表中要删除项的下标
                var userid = e.currentTarget.dataset.userid;
                this.deleteMember(userid);
            },

css相关样式如下，图片中按钮样式这里就不放啦，自定义就好

.member-list-li{
    position: relative; 
    overflow: hidden;
    margin: 15px 0;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    color: #fff;
}
.touch-list{
    position: absolute; 
    top:0; 
    padding: 10px 10px 10px;
    background-color: #697082;
    border-radius: 10px;
    overflow: hidden;
}
.list-touch{
    position: relative;
    width: 100%;   
    z-index: 5;    
    transition: left 0.2s ease-in-out;   
    white-space:nowrap;   
    overflow:hidden;   
    text-overflow:ellipsis; 
}
.list-delete{
    right: 0; 
    float: left;
    width: 70px;
    height: 121px;
    line-height: 101px;
    background-color: #EA5863;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 18px;
    font-weight: lighter;
    text-align: center;
}