move abs lis -s data- sta 利用 ons line

在一些app中，隨處可見左滑動的效果，在微信小程序中，官方並未提供相關組件，需要我們自己動手寫一個類似的效果

下面僅列舉出核心代碼，具體的優化需要根據你自身的需求

<view class=‘list‘ wx:if="{{list.length > 0}}">
  <block wx:for="{{list}}" wx:key="list">
    <view class=‘list_item‘ bindtap=‘toResult‘ data-num=‘{{item.num}}‘ data-com=‘{{item.com}}‘ bindtouchstart
 
="touchstart" bindtouchmove="touchmove">
      <view class=‘list_item_img‘>
        <image src="../../images/{{item.com}}.png"></image>
      </view>
      <view class=‘list_item_num {{touchShow ? "touch":""}}‘>
        {{item.express_text}}<text>|</text>{{item.num}}
      
 
</view>
      <view class=‘touchdel‘ wx:if="{{touchShow}}">
        刪除
      </view>
    </view>  
  </block>
</view>

對上述代碼做出幾點說明：

1. list 是一個數組，數據源是在對應的頁面的js文件裏
2. 主要利用到微信小程序內置的兩個事件touchstart和touchmove
3. 實現原理：通過監聽touchstart和touchmove事件，獲取clientX，判斷clientX是否打到某個閾值，來決定隱藏或顯示“刪除“ 按鈕

.list_item .list_item_num {
  width: 580rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: right;
  font-size: 30rpx;
}
.list_item .touch {
  width: 480rpx;
}
.list_item .touchdel {
  width: 120rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  background: #f55757;
  color: #ffffff;
}

上面是相關的css樣式

下面是js相關代碼(核心)

data: { list: [], startX:0, endX:0 }, touchstart: function (e) { var startX = e.changedTouches[0].clientX; console.log(‘start‘+startX); this.setData({ startX: startX }) }, touchmove: function (e) { var endX = e.changedTouches[0].clientX; console.log(‘end‘ + endX); if(Math.abs(parseInt(endX) - parseInt(this.data.startX)) > 80) { this.setData({ touchShow: parseInt(endX) - parseInt(this.data.startX) < 0 ? true:false, endX:endX }) } },

微信小程序實現滑動刪除效果