2021-04-01

小程序通过手指的滑动控制某一区域的滑动
1.要被移动的区域里去绑定手指点击事件
<view
class=“cover-container”
bindtouchstart=“handleTouchStart”
bindtouchmove=“handleTouchMove”
bindtouchend=“handleTouchEnd”

2.接下来在js文件中去定义事件,注意这里定义的和wxml文件中绑定的名字一定要一致

 **
  定义手指滑动事件 *
   */
 handleTouchStart(){
    console.log('start');
 },
 handleTouchMove(){
  console.log('move');
},
handleTouchEnd(){
  console.log('end');
},

3.接下来计算手指移动的距离：
移动过程中的纵向坐标-起始的坐标=距离
在js文件中定义变量

let startY = 0;//手指起始的坐标
let moveY = 0;//手指移动时的坐标
let moveDistance = 0;//手指移动的距离

4.接下来在在定义的事件中去获得坐标

handleTouchStart(event){
   //通过event获取手指的坐标，因为可能有多个手指去触摸，所以采用数组；因为按照第一个手指，所以数组的下标为0
    startY=event.touches[0].clientY;
 },
 handleTouchMove(event){ 
  //手指的移动时候的坐标
  moveY=event.touches[0].clientY;
  moveDistance = moveY - startY;
  console.log(moveDistance);
},
handleTouchEnd(){
  
},

5.现在可以移动，也可以获得距离，那么接下来就是控制移动的距离，使用的是c3的transform。transform里面有旋转，位移，缩放等功能。这里可以用位移来搞定。在js文件的data中去初始化一个值，

data: {
    // 因为是纵向的位移，所以用translateY,因为初始值为0 ，所以这里写0 
    coverTransform:'translateY(0)'

  },

6.在data里面写好之后，要把这个变量的值往对应的要使用的部分去写，所以在wxml文件里面去写

<view 
  class="cover-container"
  bindtouchstart="handleTouchStart"
  bindtouchmove="handleTouchMove"
  bindtouchend="handleTouchEnd"
  style="transform:{{coverTransform}}"
  >

7.接下来根据手指的移动距离，在js文件中动态的更新coverTransform的状态值

handleTouchMove(event){ 
  //手指的移动时候的坐标
  moveY=event.touches[0].clientY;
  moveDistance = moveY - startY;
  console.log(moveDistance);
  this.setData({
    coverTransform:'translateY(${moveDistance}rpx)'
  })
}