直接效果圖

效果圖

需求，優(yōu)化錢

1.項(xiàng)目需要滑動刪除的功能嗤无，項(xiàng)目最初時間有點(diǎn)趕震束，基于最簡單的思路去寫的。最后發(fā)現(xiàn)體驗(yàn)并不好当犯，有卡頓現(xiàn)象垢村，而且當(dāng)頁面出現(xiàn)滾動條時，頁面上下滑動時也會出現(xiàn)卡頓現(xiàn)象嚎卫，所有抽時間重寫嘉栓。
2.之前的實(shí)現(xiàn)方式是通過 滑動動態(tài)去setData然后綁定dom設(shè)置dom的style,也比較消耗性能,實(shí)現(xiàn)起來比重寫后的要復(fù)雜。
3.githubDEMO地址
4.blog地址

優(yōu)化前實(shí)現(xiàn)方案

<view style={{position}}></view>

.........
this.setData({
   position : "left:28.123762"http://小數(shù)點(diǎn)....會導(dǎo)致更卡 
})
.........

優(yōu)化后實(shí)現(xiàn)方案

1.touchStart
2.touchEed
3.wx.createAnimation
通過touchStart驰凛，touchEed來判斷用戶手指的移動方向和移動距離，添加不同的動畫
4.{{ index == activeIndex ? animation : animationClose }},添加打開動畫担扑，關(guān)閉動畫恰响。activeIndex不是當(dāng)前選中滑動的元素，肯定是要關(guān)閉的動畫取反即可

代碼

<view>
  <view class="list" wx:for="{{list}}" wx:key="{{id}}" >
    <view class="slide-box" data-index="{{index}}"
       bindtouchstart="touchS"
        bindtouchend="touchE"
          animation="{{ index == activeIndex ? animation : animationClose }}" 
          >
      <view class="pot-image">
        <image src="{{item.image}}"></image>
      </view>
      <view>
        {{item.title}}{{index}}
      </view>
    </view>
    <view class="del">刪除</view>
  </view>
</view>

Page({
   data : {
        animationStart: "",//打開動畫
        activeIndex: '',  //當(dāng)前選中的元素
        startClient: '',  //起點(diǎn)位置
        animationClose : "",//關(guān)閉動畫
   },
   onLoad: function () {
    this.animationStart = wx.createAnimation({
      duration: 450,
      timingFunction: 'ease',
      delay: 0,
      transformOrigin: 'left top 0',
      success: function (res) {
        this.setData({
          startClient: ''
        })
      }
    })
    this.animationClose = wx.createAnimation({
      duration: 450,
      timingFunction: 'ease',
      delay: 0,
      transformOrigin: 'left top 0',
      success: function (res) {}
    })
  },
  
  
  //滑動開始
  touchS: function (e) {  
    console.log(e,'start')
      //設(shè)置當(dāng)前滑動  元素的 index
      //滑動元素的  起始x  位置
    this.setData({
      activeIndex: e.currentTarget.dataset.index, 
      startClient: e.changedTouches[0].clientX,   
      animationStart: ""
    })
  },
  
  
  //滑動結(jié)束
  touchE: function (e) { 
    console.log(e,'end')
    //計(jì)算當(dāng)前移動的距離
    var clientX = e.changedTouches[0].clientX  
    //起始點(diǎn) - 結(jié)束點(diǎn)   關(guān)閉
    if (clientX - this.data.startClient > 60) {    
      this.animationStart.left(0).step()
      //打開
    } else if (clientX - this.data.startClient  < -60) {  
      this.animationStart.left(-180).step()   
      //關(guān)閉上一個
      this.animationClose.left(0).step()
    }
    this.setData({
      animationStart: this.animationStart.export(),
      animationClose: this.animationClose.export()
    })
  }
})