微信小程序信息会话列表删除功能

示例：

 

 其实也算是挺简单的一个功能：

     首先我们可以将页面画出来

wxml

<view style="background:#F7F7F7;height:100%;">
  <view class="inforList">
    <view wx:for="{{inforList}}" wx:key="index" class="list" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="left:{{item.left}}rpx" data-index="{{index}}" bindtap="inforTap">
      <image src="{{item.src}}" class="infor_img"></image>
      <view class="content">
        <view class="con_top">
          <view class="con_right">
            <view class="vip" style="{{item.isVIP?'background:#F53249;':'background:#b7b7b7;'}}">vip</view>
            <view class="infor_name">{{item.name}}</view>
          </view>
          <view class="infor_time">{{item.time}}</view>
        </view>
        <view class="con_bottom">
          <view class="infor_near">{{item.nearInformation}}</view>
          <view class="infor_num">{{item.inforNum}}</view>
        </view>
      </view>
      <view class="remove" data-index="{{index}}" bindTap="delTap">删除</view>
    </view>
  </view>
</view>

　　

wxss

 

/* pages/actiondetail/index.wxss */
.inforList{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.inforList .list{
  height: calc(139rpx - 24rpx);
  width: calc(100% - 60rpx);
  display: flex;
  padding: 24rpx 30rpx 0 30rpx;
  position: relative;
}
.list .infor_img{
  width: 90rpx;
  height: 90rpx;
  margin-right: 30rpx;
}
.list .content{
  width: calc(100% - 120rpx);
  height: 100%;
  border-bottom: 1rpx solid #E5E5E5;
}
.content .con_top{
  height: 40rpx;
  width: 100%;
  display: flex;
}
.con_top .con_right{
  width: calc(100% - 100rpx);
  display: flex;
}
.con_top .vip{
  width: 58rpx;
  height: 32rpx;
  border-radius: 16rpx;
  color: #ffffff;
  font-size: 20rpx;
  text-align: center;
  line-height: 30rpx;
  margin-right: 15rpx;
  margin-top: 6rpx;
}
.con_top .infor_name{
  color: #333333;
  font-size: 32rpx;
}
.con_top .infor_time{
  color: #aaaaaa;
  font-size: 22rpx;
  width: 100rpx;
}
.content .con_bottom{
  margin-top: 15rpx;
  height: calc(100% - 55rpx);
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.con_bottom .infor_near{
  width: calc(100% - 50px);
  color: #999999;
  font-size: 26rpx;
  overflow: hidden;
  height: 38rpx;
}
.con_bottom .infor_num{
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 30rpx;
  background: #FF4444;
  color: #ffffff;
  font-size: 20rpx;
}
.list .remove{
  width: 140rpx;
  height: 139rpx;
  background: #FF5C5C;
  text-align: center;
  line-height: 139rpx;
  font-size: 34rpx;
  color: #ffffff;
  position: absolute;
  right: -140rpx;
  top: 0;
}

 

　　

 

js里面加一点假数据

data: {
    name: '',
    inforList: [
      {
        src: '/imgs/homeicon-1shoulder.png',
        isVIP: true,
        name: '齐磊',
        time: '11小时前',
        nearInformation: '这是一条最近的消息',
        inforNum: 3,
        left: 0
      },
      {
        src: '/imgs/homeicon-3back.png',
        isVIP: true,
        name: '王一',
        time: '1小时前',
        nearInformation: '这是内容',
        inforNum: 1,
        left: 0
      },
      {
        src: '/imgs/homeicon-6Buttock.png',
        isVIP: true,
        name: '李二',
        time: '15小时前',
        nearInformation: '这是一条最近的消息这是一条最近的消息这是一条最近的消息',
        inforNum: 5,
        left: 0
      },
      {
        src: '/imgs/homeicon-8Aerobic.png',
        isVIP: true,
        name: '张三',
        time: '一天前',
        nearInformation: '这是一条最近的消息',
        inforNum: 2,
        left: 0
      }
    ],
    startX: 0
  },

　　

这样我们基本的页面就出来了

 

 

 

  其次我们该考虑怎么样实现左滑出现删除呢

        这里我的做法很简单，那就是控制它的left值（css里面我给他定位了），删除在最右边 我们可以修改left值查看

n那么接下来就是考虑用什么方法控制他的left值，这里就用到了官网里面给的三个方法

 

 

 

 

 

 

那么我们就试着用用他

// pages/actiondetail/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: '',
    inforList: [
      {
        src: '/imgs/homeicon-1shoulder.png',
        isVIP: true,
        name: '齐磊',
        time: '11小时前',
        nearInformation: '这是一条最近的消息',
        inforNum: 3,
        left: 0
      },
      {
        src: '/imgs/homeicon-3back.png',
        isVIP: true,
        name: '王一',
        time: '1小时前',
        nearInformation: '这是内容',
        inforNum: 1,
        left: 0
      },
      {
        src: '/imgs/homeicon-6Buttock.png',
        isVIP: true,
        name: '李二',
        time: '15小时前',
        nearInformation: '这是一条最近的消息这是一条最近的消息这是一条最近的消息',
        inforNum: 5,
        left: 0
      },
      {
        src: '/imgs/homeicon-8Aerobic.png',
        isVIP: true,
        name: '张三',
        time: '一天前',
        nearInformation: '这是一条最近的消息',
        inforNum: 2,
        left: 0
      }
    ],
    startX: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  drawStart: function (e) {
    console.log("drawStart") 
    var touch = e.touches[0]
    console.log(touch)
    for(var index in this.data.inforList) {
      var item = this.data.inforList[index]
      item.left = 0
    }
    this.setData({
      inforList: this.data.inforList,
      startX: touch.clientX,
    })
 
  },
  drawMove: function (e) {
    console.log("drawMove") 
    var touch = e.touches[0]
    console.log(touch) 
    var item = this.data.inforList[e.currentTarget.dataset.index]
    var disX = this.data.startX - touch.clientX
    
    if (disX >= 10) {
      if (disX > 140) {
        item.left = -140
      } else {
        item.left = '-' + disX
      }
      this.setData({
        inforList: this.data.inforList
      })
    } else {
      item.left = 0
      this.setData({
        inforList: this.data.inforList
      })
    }
  },  
  drawEnd: function (e) {
    console.log("drawEnd") 
    var touch = e.touches[0]
    console.log(e, touch)
    var item = this.data.inforList[e.currentTarget.dataset.index]
    if (item.left <= -70) {
      item.left = -140
      this.setData({
        inforList: this.data.inforList,
      })
    } else {
      item.left = 0
      this.setData({
        inforList: this.data.inforList,
      })
    }
  },

  delTap (e) {

    var index = e.currentTarget.dataset.index

    var arr = []

    this.data.inforList.filter((item, idx) => {

      if (index != idx) {

        arr.push(item)

      }

    })

    this.setData({

      inforList: arr

    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

　　

这样我们就实现了向左滑动出现删除功能