深入微信小程序的拖拽排序--小白快速入门二

目录

触摸事件

touches与changedTouches的区别

page与client的区别

简陋的移动

触摸事件

在解决translate与其他属性的关系之前，我们先来讲一讲标签的滑动事件。

首先，要想去移动一个标签，你光知道属性是不够的，你还需了解标签从触摸、移动到结束的整个过程，小程序帮你干了些什么。

小程序给我们提供了下面这三个触摸事件

• touchstart（标签被点击时触发）
• touchmove（标签移动时触发）
• touchend（标签松开点击时触发）

我们还是用代码来演示一遍吧

wxml

<view 
    bindtouchmove="bindtouchmove" 
    bindtouchstart="bindtouchstart" 
    bindtouchend="bindtouchend">
标签
</view>

js

Page({
    //触摸开始
    bindtouchstart: function(e) {
        console.log("touchstart",e);
    },
    //触摸并移动
    bindtouchmove: function(e) {
        console.log("touchmove",e);
    },
    //触摸结束
    bindtouchend: function(e) {
        console.log("touchend",e);
    }
})

将代码到入微信开发者，编译运行，点击滑动view，控制台会输出以下信息

其中这里面返回了一些我们需要用来计算的数据，指尖坐标(