wechat-app-LeftSlide

Micro letter small program imitation micro letter, QQ slide left delete operation.

Project address, welcome star

Github.com/songzeng201…

Nonsense not to say, first look at the effect, can meet your needs, you continue to look down.

I am lazy, delete the action is a little too stiff, really dislike the students can add an animation up.Copy the code

OK let’s look at the code

The first is the binding event in WXML

  <view class="item-wrapper">
   <view class="item-list" wx:for="{{itemData}}" wx:for-item="item" wx:for-index="index" wx:key="that">
       <view class="item-info" data-index="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="left:{{item.left + 'rpx'}}">
           <image class="info-img" src="{{item.img}}"></image>
           <view class="info-wrapper">
               <view class="info-desc">
                   <view class="name">{{item.name}}</view>
                   <view class="time">{{item.time}}</view>
               </view>
               <view class="info-content">{{item.info}}</view>
           </view>
       </view>
       <view class="item-oper">
           <view class="oper-delete" bindtap="itemDelete" data-index="{{index}}">delete</view>
       </view>
   </view>
</view>
Copy the code

The main is to use the small program touch event for processing style will not say, you can write, do not want to write students can also be used directly.Copy the code

Then there are the event handlers

touchS: function (e) {  // touchstart
    let startX = App.Touches.getClientX(e)
    startX && this.setData({ startX })
  },
  touchM: function (e) {  // touchmove
    let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)
    itemData && this.setData({ itemData })

  },
  touchE: function (e) {  // touchend
    const width = 150  // Define the action list width
    let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
    itemData && this.setData({ itemData })
  },
  itemDelete: function(e){  // itemDelete
    let itemData = App.Touches.deleteItem(e, this.data.itemData)
    itemData && this.setData({ itemData })
  },
  
Copy the code

The event function also stars the three events of touch and the delete event. The core of each event is to update data, namely setData().Copy the code

Data processing function

I have taken out the data processing function separately, so that it is easy to reuse. In the content.js file in the utils folderCopy the code

touchM(e, dataList, startX) {  // Update list data during touchMove
        let list = this._resetData(dataList)
        list[this._getIndex(e)].left = this._getMoveX(e, startX)
        return list
    }

    touchE(e, dataList, startX, width) {  // touchend Updates list data
        let list = this._resetData(dataList)
        let disX = this._getEndX(e, startX)
        let left = 0

        if (disX < 0) {  // Determine the slide direction, (slide left)
            // Slide more than half the width of the delete to display the list of actions otherwise not
            Math.abs(disX) > width / 2 ? left = -width : left = 0
        } else {  // Slide right to reset
            left = 0
        }

        list[this._getIndex(e)].left = left
        return list
    }

    deleteItem(e, dataList) {  // Delete function
        dataList.splice(this._getIndex(e), 1)
        return dataList
    }
Copy the code

Each function has a comment, I believe you can understand, there is no more explanation. Any better methods or suggestions are welcome. It feels like this wheel could also welcome Star.Copy the code

Micro letter small program imitation micro letter, QQ slide left delete operation

Wechat applets to customize tabbar