左滑显示隐藏内容--微信小程序

微信小程序list列表中，左滑出现隐藏内容

需求：

在微信小程序中，列表上有时为了方便或者美观，会将删除、修改以及查看等按钮放在list的右边，进行隐藏起来，只有左滑时才能
够出现，对此进行一个实现

想法：

出现两个view，list列表的view和需要隐藏按钮的view，list列表的view放在按钮view上面，进行遮挡，list列表左滑，按钮出现

操作：
wxml:

<view class="container">
  <view class="container_div" wx:for="{{centent}}" wx:key="index">
    <view class="delate_btun">
      <text>删除</text>
      <text>修改</text>
    </view>
    <view class="cnetent_list" style="position: absolute; left: -{{item.posice}}rpx" data-inte="{{index}}" bindtouchstart="toLiftShowCentent" bindtouchmove="toLiftCentent" bindtouchend="toshow">
      <text>{{item.title}}</text>
      <text>{{item.time}}</text>
    </view>
  </view>
</view>

wxss:

.container {
  width: 100%;
}

.container_div {
  width: 700rpx;
  margin: 0 auto;
  position: relative;
  border-bottom: 1rpx solid #ccc;
}

.delate_btun {
  width: 300rpx;
  margin: 0 0 0 auto;
  height: 200rpx;
  line-height: 200rpx;
  background-color: #eef;
}

.delate_btun text {
  width: 150rpx;
  display: inline-block;
  text-align: center;
}
.cnetent_list {
  position: absolute;
  top: -2rpx;
  left: -3rpx;
  border-bottom: 1rpx solid #ccc;
  width: 700rpx;
  margin: 0 auto;
  height: 200rpx;
  line-height: 200rpx;
  background-color: #eff;
}

.cnetent_list>text:nth-child(2) {
  float: right;
  background-color: #eff;
}

js:

data: {
    centent: [
      { title: '11111111', time: '2022-03-23', startX: '', posice: '' },
      { title: '22222222', time: '2022-03-23', startX: '', posice: '' },
      { title: '33333333', time: '2022-03-23', startX: '', posice: '' },
      { title: '44444444', time: '2022-03-23', startX: '', posice: '' },
      { title: '55555555', time: '2022-03-23', startX: '', posice: '' },
      { title: '66666666', time: '2022-03-23', startX: '', posice: '' }
    ],

    // 当前的位置信息  posice
  },


  // 左滑显示内容
  toLiftShowCentent(e) {
    this.data.centent.forEach(item => {			// 先将所有的已经显示的按钮进行遮盖
      item.startX = '';
      item.posice = ''
    })
    this.setData({
      centent: this.data.centent
    })
    this.data.centent[e.currentTarget.dataset.inte].startX = e.changedTouches[0].pageX
    this.data.centent[e.currentTarget.dataset.inte].posice = '-5'		// 点击时，按钮不能够出现
    this.setData({
      centent: this.data.centent
    })
  },

  // 移动中的内容
  toLiftCentent(e) {
    let showPage = '';
    showPage = this.data.centent[e.currentTarget.dataset.inte].startX - e.changedTouches[0].pageX
    this.data.centent[e.currentTarget.dataset.inte].posice = showPage
    this.setData({			// 随时进行上方view的移动
      centent: this.data.centent
    })
  },

  // 移动完毕出现的状态
  toshow(e) {
    // console.log('这是移动之后出现的内容===>', e);
    if (this.data.centent[e.currentTarget.dataset.inte].posice < 0) { // 如果是右移动的话，将按钮进行隐藏
      this.data.centent[e.currentTarget.dataset.inte].posice = '',
        this.data.centent[e.currentTarget.dataset.inte].startX = ''
    } else { // 左移的话，按钮进行显示
      this.data.centent[e.currentTarget.dataset.inte].posice = '302'
    }
    this.setData({
      centent: this.data.centent
    })
  },