前言

在小程序中摩泪，實現(xiàn)類似微信左滑刪除的效果笆焰，有些人可能會想到在view里用到touchstart，touchmove见坑，touchend結(jié)合實現(xiàn)的嚷掠。但這個有缺點，特別是在ios真機上荞驴，左滑時頁面會上下滑動不皆，用戶體驗emmm...或許需要增加disableScroll:true，但這個頁面會被禁止?jié)L動熊楼，或許里面再嵌scroll-view就可以實現(xiàn)的霹娄。但我要說的不是這個方案，小程序出了更佳的一個組件，就是movable-view犬耻，很好用踩晶，提供動畫的過渡，提供滑動觸發(fā)的x軸枕磁，可以用這個x軸作為判斷的渡蜻，比較方便～

圖片發(fā)自簡書App

xml

<template>
    <block wx:for="{{dataList}}" wx:key="index">
        <movable-area class="area">
            <movable-view class="item"
                damping="100" 
                direction="horizontal" 
                x="{{item.swipeX}}" 
                data-index="{{index}}" 
                @change="swipeChange({{index}})" 
                out-of-bounds="true" 
                animation="true" 
                @touchend="swipeEnd({{index}})" 
                @touchstart="swipeStart({{index}})"
            >
                <view class="item-left">{{item.name}}</view>
                <view class="item-right" @tap.stop="delete({{index}})">刪除</view>
            </movable-view>
            <view class="line"></view>
        </movable-area> 
    </block>
</template>

• Tip:movable,movaview必須設置寬和高的值，否則默認值（10px)
• Tip: movable必須要比movaview大點的计济，只是要容下內(nèi)容和刪除的容器的寬度

js

<script>
import wepy from 'wepy';

export default class swipeLeft extends wepy.page{
    config={
        navigationBarTitleText:'左滑刪除',
    }

    data={
        dataList:[
            {name:'無可奈何花落去'},
            {name:'莊生曉夢迷蝴蝶'},
            {name:'天涯何處無芳草'},
            {name:'此情可待成追憶'},
            {name:'人面不知何處'},
            {name:'心悅君兮君不知'}
        ],
        currentX:0,
        currentIndex:-1,
    }

    setShowDel(index,moveX){
        this.dataList[index].swipeX=moveX;
    }

    methods={

        //滑動開始的觸發(fā)事件
        swipeStart(index){
            this.currentIndex=index;
            this.dataList.forEach((item,i)=>{
                if(index!=i){
                    item.swipeX=0;
                }
            })
        },

        //滑動結(jié)束的觸發(fā)事件
        swipeEnd(index){
            let swipeX=this.dataList[index].swipeX;
            if(this.currentX<-10 && (swipeX===0 || !swipeX)){
                this.setShowDel(index,-120);
                return;
            }

            if(this.currentX>-55 && swipeX===-120){
                this.setShowDel(index,0);
                return;
            }
        },


        //監(jiān)聽滑動過程觸發(fā)的事件
        swipeChange(...e){
            if(this.currentIndex===e[0]){
                this.currentX=e[1].detail.x;
            }
        }
    }

}
</script>

wxss

<style lang="less">

.area{
    width: 750rpx;
    position: relative;
    height: 150rpx;
    .line{
        position: absolute;
        width: 690rpx;
        height: 1px;
        background: #ededed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    .item{
        width: 900rpx;
        height: 150rpx;
        display: flex;
        align-items: center;
        .item-left{
            width: 750rpx;
            margin-left: 30rpx;
        }
        .item-right{
            width: 140rpx;
            height: 150rpx;
            background: #ED6F20;
            color: #fff;
            line-height: 150rpx;
            text-align: center;
            border-radius: 0 10rpx 10rpx 0;
        }
    }
}
</style>