微信小程序 - 實現向左滑動刪除功能

實現向左滑動刪除

wxml

<scroll-view scroll-y enable-back-to-top style="height:{{ scrollHeight }}px" >
    <view>
        <block wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="index" >
            <view class="list {{ item.isTouchMove ? 'touch-move-active' : '' }}" bindtouchstart="touchStart" bindtouchmove="touchMove" data-index="{{ index }}" >
                
                <view class="txt">{{ item.id }} -- {{ item.title }}</view>
                <view class="del" bindtap="delList" data-index="{{ index }}" > 刪除 </view>
            </view>
        </block>
    </view>
</scroll-view>

scroll-view 屬性設置：

• scroll-y 　　                允許縱向滾動
• enable-back-to-top      iOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向
• bindtouchstart             手指觸摸動作開始
• bindtouchmove           手指觸摸后移動

 

js

Page({ /** * 頁面的初始數據 */ data: { list: [ { id: "0001", title: "商品1" }, { id: "0002", title: "商品2" }, // ..........
 ], scrollHeight: 0,  // scroll-view高度
        startX: 0,        // 開始X坐標
        startY: 0,        // 開始Y坐標
 }, // 手指觸摸動作開始
    touchStart: function(e){ let that = this; //開始觸摸時 重置所有刪除
        that.data.list.forEach(function (v, i) { if (v.isTouchMove) v.isTouchMove = false; // 只操作為true的
 }) // 記錄手指觸摸開始坐標
 that.setData({ startX: e.changedTouches[0].clientX,  // 開始X坐標
            startY: e.changedTouches[0].clientY,  // 開始Y坐標
 list: that.data.list }) }, // 手指觸摸后移動
    touchMove: function(e){ let that = this, index = e.currentTarget.dataset.index,    // 當前下標
            startX = that.data.startX,                // 開始X坐標
            startY = that.data.startY,                // 開始Y坐標
            touchMoveX = e.changedTouches[0].clientX, // 滑動變化坐標
            touchMoveY = e.changedTouches[0].clientY, // 滑動變化坐標
            // 獲取滑動角度
            angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); 　　　　　// 判斷滑動角度 that.data.list.forEach(function (v, i) { v.isTouchMove = false
            // 滑動超過30度角 return
            if (Math.abs(angle) > 30) return; if (i == index) { // 右滑
                if (touchMoveX > startX) v.isTouchMove = false
                // 左滑
                else v.isTouchMove = true } }) // 更新數據
 that.setData({ list: that.data.list }) }, // 計算滑動角度
    angle: function (start, end) { let that = this, _X = end.X - start.X, _Y = end.Y - start.Y; // 返回角度 /Math.atan()返回數字的反正切值
        return 360 * Math.atan(_Y / _X) / (2 * Math.PI); }, // 刪除
    delList: function(e){ let that = this, index = e.currentTarget.dataset.index;  // 當前下標
　　　　　// 切割當前下標元素，更新數據 that.data.list.splice(index, 1); that.setData({ list: that.data.list }) }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { let that = this; // 動態獲取屏幕高度
 that.setData({ scrollHeight: wx.getSystemInfoSync().screenHeight }) }, }) 

 

 

css

/* 列表 */ .list { display: flex; justify-content: space-between; width: 100%; height: 100rpx; line-height: 100rpx; overflow: hidden; text-align: center; border-bottom: 1px solid #cccccc;
}
/* 列表內容 */ .list .txt { flex-grow: 1; width: 100%; margin-left: -150rpx; background-color: #fff;
}
/* 刪除按鈕 */ .list .del { flex-grow: 0; width: 150rpx; color: #fff; background-color: #fe3e2f;
} .list .txt, .list .del { transform: translateX(150rpx); transition: all 0.4s;
} .touch-move-active .txt,.touch-move-active .del { -webkit-transform: translateX(0); transform: translateX(0);
}