组件页面代码：

movable-area  movable-view class='conversation' catchtap='toChat' direction='horizontal'    x='{{x}}' damping="100" data-index='{{index}}' data-userid='{{userid}}'    bind:touchstart='touchstart' bind:touchend='touchend' catch:change='onChange'    slot/slot    view class='delete' catchtap='delConversation' data-index='{{index}}'删除/view  /movable-view/movable-area

 组件JS代码： 

// pages/sliderLeft/sliderLeft.jsComponent({  /**   * 组件的属性列表   */  properties: {    userid: {      type: Number,      value: '1'    },    index: {      type: Number,      value: '0'    },    isOpen: {      type: Boolean,      value: false,      observer: function (isOpen) {        this.setData({          x: isOpen ? -100 : 0        })      }    }      },  /**   * 组件的初始数据   */  data: {    x: 0,  },  /**   * 组件的方法列表   */  methods: {    onChange: function (e) {      if (e.detail.source === 'touch') {        this.setData({ x: e.detail.x })      }    },    touchstart: function (e) {      if(!this.data.isOpen){        this.triggerEvent('conversationTouchstart', { index: e.currentTarget.dataset.index }, {})      }    },    touchend: function (e) {      var x = this.data.x;      //删除按钮已显示，则一滑动就关闭      if (this.data.isOpen && x  -96) {        this.setData({           x: 0,          isOpen: false        })      }else if(x  -40) {        //达到阈值则显示否则关闭        this.setData({          isOpen: true        })      } else {        this.setData({          x: 0,          isOpen: false        })      }    },    /**     * 删除会话     */    delConversation: function (e) {      this.triggerEvent('delConversation', {index: e.currentTarget.dataset.index}, {})    },    /**     * 跳转到聊天界面     */    toChat: function (e) {      wx.navigateTo({        url: '../chat/index?userId=' + e.currentTarget.dataset.userid,      })    },  }})

 组件CSS代码： 

movable-area{  width: 1150rpx;  height: 180rpx;  display: flex;  margin-left: -200rpx;  justify-content: flex-end;}.conversation{  width: 950rpx;  height: 180rpx;  position: static;   display: flex;}.delete{  width: 200rpx;  height: 180rpx;  background: red;  color: white;  font-size: 45rpx;  line-height: 180rpx;  text-align: center;}

使用页面代码： 

block wx:for='{{conversations}}' wx:for-item='item' wx:for-index='index' wx:key='{{item.userId}}'  swider-left is-open='{{item.isOpen}}'  userid='{{item.userId}}' index='{{index}}'     binddelConversation='delConversation' bindconversationTouchstart='touchstart'    view class='userInfo'        image class='avatar' src='{{item.avatar}}'/image        view class='info'          view class='name'{{item.name}}            view class='remind' wx:if='{{item.unread_msg_count  0}}'/view          /view          view{{item.mtime}}/view        /view      /view    /swider-left/block

使用页面JS代码：

 /**   * 隐藏所有删除按钮   */  touchstart: function(e){    var conversations = this.data.conversations;    conversations[e.detail.index].isOpen = false;    this.setData({      conversations: conversations    })  },  /**   * 删除列表项   */  delConversation: function (e) {    //选项索引    var index = e.detail.index;  },