直接效果圖

效果圖

需求，優(yōu)化錢

1.項(xiàng)目需要滑動(dòng)刪除的功能，項(xiàng)目最初時(shí)間有點(diǎn)趕，基于最簡(jiǎn)單的思路去寫的。最后發(fā)現(xiàn)體驗(yàn)并不好，有卡頓現(xiàn)象，而且當(dāng)頁(yè)面出現(xiàn)滾動(dòng)條時(shí)，頁(yè)面上下滑動(dòng)時(shí)也會(huì)出現(xiàn)卡頓現(xiàn)象，所有抽時(shí)間重寫。
2.之前的實(shí)現(xiàn)方式是通過 滑動(dòng)動(dòng)態(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)....會(huì)導(dǎo)致更卡 
})
.........

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

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

代碼

<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: "",//打開動(dòng)畫
        activeIndex: '',  //當(dāng)前選中的元素
        startClient: '',  //起點(diǎn)位置
        animationClose : "",//關(guān)閉動(dòng)畫
   },
   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) {}
    })
  },
  
  
  //滑動(dòng)開始
  touchS: function (e) {  
    console.log(e,'start')
      //設(shè)置當(dāng)前滑動(dòng)  元素的 index
      //滑動(dòng)元素的  起始x  位置
    this.setData({
      activeIndex: e.currentTarget.dataset.index, 
      startClient: e.changedTouches[0].clientX,   
      animationStart: ""
    })
  },
  
  
  //滑動(dòng)結(jié)束
  touchE: function (e) { 
    console.log(e,'end')
    //計(jì)算當(dāng)前移動(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)閉上一個(gè)
      this.animationClose.left(0).step()
    }
    this.setData({
      animationStart: this.animationStart.export(),
      animationClose: this.animationClose.export()
    })
  }
})