小程序左右滑動顯示操作

開發使用的是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事件。若不進行初始化，則位置會被記錄，第二次進行觸碰時會使元素閃動。體驗不佳。