微信小程序-左滑显示删除按钮（微信文章未删减版）

最终效果

实现思路

使用微信小程序的movable-view组件。movable-view。
使用position: absolute;，将可滑动部分（z-index值较大）放置在删除按钮（z-index值较小）之上，最开始是遮住删除按钮的。
使用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
}
复制代码

解决的问题

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

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

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

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

在父元素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"
  }
}
复制代码