微信小程序-左滑显示删除按钮

实现思路

1. 使用微信小程序的 movable-view 组件。movable-view。
2. 使用 position: absolute; ，将可滑动部分（ z-index 值较大）放置在删除按钮（ z-index 值较小）之上，最开始是遮住删除按钮的。
3. 使用 touchstart 、 touchend 属性绑定方法，控制删除按钮的显示隐藏。

代码

wxml

<view class="container">
  <movable-area class="movable-area">
    <movable-view direction="horizontal" out-of-bounds="{{true}}" friction="150" x="{{x}}"
      bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" >
      <view class="card-container">
        <view>{{text}}</view>
        <view class="show-operations" catchtouchstart="toggle" catchtouchend="emptyFunc">...</view>
      </view>
    </movable-view>
  </movable-area>
  <view class="operations-content" >
    <view class="operation-button" catchtap="handleDelete">
      删除
    </view>
  </view>
</view>
复制代码

在使用 movable-view 中用到的属性：

• direction="horizontal" ,设置 movable-view 为横向移动。
• out-of-bounds="{{true}}" ,设置超过区域之后， movable-view 是否还可以移动,这个属性默认值为 false ，如果不添加这个属性，就不会有回弹效果。
• friction="150" 设置摩擦系数，摩擦系数越大，滑动越快停止。
• x="{{x}}" 设置x轴方向的偏移。

tip: movable-view 必须设置width和height属性，不设置默认为10px。

tip: movable-view 默认为绝对定位，top和left属性为0px

更多内容参考：movable-view。

wxss

因为 movable-view 默认为绝对定位，所以设置删除按钮部分的 z-index 值比 movable-view 的 z-index 小，就能将删除按钮遮住。

/* 可移动部分样式 */
movable-area {
  width: 510rpx; 
}
.container,
movable-view {
  box-sizing: border-box;
  width: 750rpx;
  height: 200rpx;
}
.container {
  position: relative;
  display: flex;
  flex-direction: row;
}
movable-view {
  z-index: 5; 
  padding: 10rpx;
  overflow: hidden;
  background-color: green;
}

/* 隐藏部分样式 */
.operations-content {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
  align-items: center;
  z-index: 2; 
  right: 0;
  width: 280rpx; /* 隐藏部分的宽度 */
  height: 200rpx;
  background-color: yellow;
}
.operation-button {
  width: 150rpx;
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  border-radius: 50%;
  margin: 0 20rpx;
  background-color: gray;
  color: #fff;
}

/* 卡片样式 */
.card-container {
  width: 100%;
  height: 180rpx;
  border-radius: 5rpx;
  font-size: 20px;
  word-break: break-all;
  background-color: rgba(255, 255, 255, 0.7);
}
.show-operations {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 80rpx;
}
复制代码

js

通过控制 movable-view 的 x 属性来控制删除按钮的显示和隐藏。

绑定 movable-view 的 touchstart 和 touchend 事件，记录下触摸开始时的x轴坐标 start_x 和触摸结束时的x轴坐标 current_x ,如果 current_x - start_x 小于0就说明是朝左滑的，设置 movable-view 的 x 为 -140 来显示删除按钮，否则就是向右滑的，通过设置 x 值为 0 来隐藏删除按钮。

Component({
  properties: {
    text: {
      type: String,
      value: '示例内容示例内容'
    },
    index: Number
  },
  data: {
    x: 0,  // 注意，这里通过x属性设置的宽度的单位是px
    start_x: 0,
    operations_visible: false
  },
  methods: {
    handleTouchStart: function (event) {
      this.setData({
        start_x: event.touches[0].clientX // 触摸开始时的横坐标
      })
    },
    handleTouchEnd: function (event) {
      const current_x = event.changedTouches[0].clientX; // 触摸结束时的横坐标
      const { start_x } = this.data;
      const direction = current_x - start_x; // 判断滑动的方向

      if (direction < 0) {
        this.showOperations();
      } else {
        this.hideOperations();
      }
    },
    toggle: function () {
      let operations_visible = this.data.operations_visible;

      if (operations_visible) {
        this.hideOperations();
      } else {
        this.showOperations();
      }
    },
    handleDelete () {
      const index = this.properties.index;
      this.hideOperations();
      this.triggerEvent('delete', { index });
    },
    showOperations: function () {
      this.setData({
        x: -140,
        operations_visible: true
      });  
    },
    hideOperations: function () {
      this.setData({
        x: 0,
        operations_visible: false
      });
    },
    emptyFunc: function () {
      return false;
    }
  }
})
复制代码

在显示隐藏的部分可以做一个优化，在显示状态下左滑和在隐藏状态下右滑，不用设置 x 的值。

handleTouchEnd: function (event) {
      const operations_visible = this.data.operations_visible;
      const current_x = event.changedTouches[0].clientX; // 触摸结束时的横坐标
      const { start_x } = this.data;
      const direction = current_x - start_x; // 判断滑动的方向

      if (direction < 0) {
        !operations_visible && this.showOperations();
      } else {
        operations_visible && this.hideOperations();
      }
    },
复制代码

json

{
  "component": true
}
复制代码

解决的问题

1. 因为有回弹的效果，所以在滑动的过程中会出现一个空隙。通过设置 movable-area 的宽度能够解决这个问题。

   

movable-area {
  width: 510rpx; 
}
复制代码

这里将 movable-area 的宽度设置为 510rpx ，而不是( 750-280=470 ) 470rpx ，就能让回弹的范围在黄色部分，“隐藏”这个空隙。

必须设置 movable-area 的宽度，否则默认宽高为 10px , movable-view 可滑动的范围会更大，在滑动的过程中会出现中间空隙很大的情况。

2. 在父元素 movable-view 中添加了 bindtouchstart 和 bindtouchend 属性用于绑定触摸开始事件和触摸结束事件。在子元素中有三个点，点击三个点的时候能够切换删除按钮的显示和隐藏。但是使用 bindtap 属性绑定元素的点击事件，父元素上绑定的触摸事件也会被触发。所以需要使用 catch 绑定事件来阻止事件冒泡。

<view class="show-operations" 
catchtouchstart="toggle" 
catchtouchend="emptyFunc">...</view>
复制代码

emptyFunc: function () {
  return false;
}
复制代码

使用列表

如果要以列表的形式使用，就在父组件中引入该组件，并通过数组来控制列表。

父组件的wxml：

<view>
  <block wx:for="{{test_list}}" wx:key="{{index}}">
    <movable-component text="{{item}}" index="{{index}}" class="list-item" catch:delete="deleteItem"/>
  </block>
</view>
复制代码

父组件的js:

Page({ 
  data: {
    test_list: null
  },
  onLoad: function () {
    let list_arr = [];
    for (let i = 0; i < 5; i++) {
      list_arr.push(`${Array(10).fill(i + 1).join(' ')}`);
    }
    this.setData({
      test_list: list_arr
    })
  },
  deleteItem: function (event) {
    // 一些其余操作，比如发起删除请求
    const index = event.detail.index;
    let arr = this.data.test_list;
    arr.splice(index, 1);
    this.setData({
      test_list: arr
    })
  }
})
复制代码

父组件的wxss:

.list-item {
  display: block;
  margin: 20rpx 0;
}
复制代码

父组件的json:

{
  "usingComponents": {
    "movable-component": "./components/movableView/movableView"
  }
}
复制代码