小程式實現左滑刪除功能
阿新 • • 發佈:2018-11-27
小程式中實現左滑刪除
效果預覽:
// wxml <view class="delete_list"> <view class="list" wx:for="{{listData}}" wx:key="{{index}}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" data-index="{{index}}"> <view class="content" style="{{activeIndex===index?list_style:''}}">{{item}}</view> <view class="delete" bindtap="delete" style="{{activeIndex===index?list_style:''}}">刪除</view> </view> </view> // wxss page { height: 100%; background-color: #f1f1f1; } .delete_list { padding: 0 0 0 30rpx; margin: 30rpx 30rpx 0; background-color: #fff; } .delete_list>.list { height: 120rpx; line-height: 120rpx; display: flex; width: 100%; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.3); /*模擬一畫素邊框*/ } .delete_list>.list>.content { flex: 1; transform: translateX(240rpx); margin-left: -240rpx; /*background-color: #fff;*/ transition: all 0.2s ease-in-out; } .delete_list>.list>.delete { width: 240rpx; text-align: center; color: #fff; background-color: #E64340; transform: translateX(240rpx); transition: all 0.2s ease-in-out; } // js const app = getApp() Page({ data:{ listData: [ '我是內容一', '我是內容二', '我是內容三', '我是內容四', '我是內容五', '我是內容六', '我是內容七', '我是內容八' ], activeIndex: -1, list_style: '', startX: 0, rate: 2 }, onLoad () { let rate = 750 / wx.getSystemInfoSync().screenWidth this.setData({ rate: rate }) }, touchstart: function (e) { let startX = e.touches[0].clientX this.setData({ startX: startX }) }, touchmove: function(e) { let moveX = e.touches[0].clientX let dis = (this.data.startX - moveX) * this.data.rate // 換算成rpx let activeIndex = e.currentTarget.dataset.index let left = 240 if (dis <= 0) { left = 240 } else if (dis >= 240) { left = 0 } else { left = 240 - dis } this.setData({ list_style: 'transform:translateX(' + left + 'rpx)', activeIndex: activeIndex }) }, touchend: function (e) { let endX = e.changedTouches[0].clientX let dis = (this.data.startX - endX) * this.data.rate let activeIndex = e.currentTarget.dataset.index let left = 0 if (dis >= 200) { left = 0 } else { left = 240 } this.setData({ activeIndex: activeIndex, list_style: 'transform:translateX(' + left + 'rpx)' }) }, delete: function () { this.data.listData.splice(this.data.activeIndex, 1) this.setData({ listData: this.data.listData }) } })
備註:目前1畫素邊框問題通過box-shadow解決,本人無法通過定位結合縮放(transform: scale(0.5))解決1畫素邊框問題。