小程序左右滑动显示操作

小程序左右滑动显示操作

开发使用的是mpvue框架，具体的事件名需要更改一下。

具体在小程序中事件名为：

mpvue	微信小程序
touchstart	bindtouchstart
click	bindtap
touchmove	bindtouchmove

效果如下：

html/wxml 代码如下:

<div class="wrap">
	<div class="item" @touchstart="startX" @click="resetX" @touchmove="moveX" :style="{left: '-' + recordX + 'rpx'}">
		<div class="content">test</div>
	</div>
	<div class="test"></div>
</div>

css 文件如下

<style lang="less">
  .wrap{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    line-height: 150rpx;
    height: 150rpx;
    .item{
      background: #39c5bb;
      position: relative;
      transition: left .3s;
    }
    .test{  // 滑动滑块后出现的图标
      position: absolute;
      top: 50rpx;
      right: 20rpx;
      z-index: -1;
      width: 50rpx;
      height: 50rpx;
      background: #f6c;
    }
  }
</style>

• HTML 结构： 父容器包裹初始时显示的内容和隐藏的操作图标。且他们为兄弟节点。
• CSS 要点：显示内容采用position定位，进行滑动操作时使用left值进行相对位移。left的值通过v-bind:style实现响应。
• 隐藏元素采用position: absolute；相对于父容器进行定位，并且层级低于显示元素。被其覆盖。
• 优化：为了让滑动效果平滑一些，不那么生硬。使用CSS3 transition 将 left属性进行简单的动画处理

js 部分入下：

<script>
  export default {
    data () {
      recordX: 0
    },
    methods: {
      startX (e) {
        this.recordX = e.touches[0].clientX
      },
      resetX () {
        this.recordX = 0
      },
      moveX (e) {
        console.log(e)
      let currentX = e.touches[0].clientX
      if (currentX - this.recordX <= -60) {
        this.recordX = 100
      }
      if (currentX - this.recordX >= 60) {
        this.recordX = 0
      }
    }
  }
}
</script>

• 首先 startX 函数记录 点击屏幕的X轴的值。
• moveX 计算在X轴上移动屏幕的距离。
• 当前位置 - 起始位置 <= -60 则表示左滑。因为屏幕的二维坐标是从上到下，从左到右递增的。因此向左移，后者坐标肯定小于前者，因此为负数。至于60，是值操作按钮所占的宽度的一半。超过一半则保持滑动状态
• 当前位置 - 起始位置 >= 60.原理同上。这次代表向右滑。
• resetX 重置位置。因为touchStart时也会调用一次click事件。若不进行初始化，则位置会被记录，第二次进行触碰时会使元素闪动。体验不佳。