手机小程序滑动返回是什么事件

微信小程序的滑动事件是通过bindtouchmove实现的，通过比较滑动事件前后的坐标判断滑动方向，微信小程序通过三个事件共同作用实现了触摸滑动事件，即 bingtouchstart、bindtouchmove 和 bindtouchend 事件。

WXML：

<view class='btn' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>

OK

</view>

JS：

data: {

touchS : [0,0],

touchE : [0,0]

},

touchStart: function(e){

// console.log(e.touches[0].pageX)

let sx = e.touches[0].pageX

let sy = e.touches[0].pageY

this.data.touchS = [sx,sy]

},

touchMove: function(e){

let sx = e.touches[0].pageX

let sy = e.touches[0].pageY

this.data.touchE = [sx, sy]

},

touchEnd: function(e){

let start = this.data.touchS

let end = this.data.touchE

console.log(start)

console.log(end)

if(start[0] <end[0] - 50){

console.log('右滑')

}else if(start[0] >end[0] + 50){

console.log('左滑')

}else{

console.log('静止')

}

},

在 touchstart 时，监听到触摸开始时的 （x, y）位置；在 touchMove 方法中持续监听触摸点的位置（x, y），并保存在 data 中；在 touchEnd 方法中对开始的触摸位置和结束的触摸位置进行判断，如果移动距离大于 50 则判定为发生触摸滑动事件。

在上面示例中，当 X 轴方向的移动超过 50 时即判定为左滑或右滑，相应的也可以通过判断 Y 轴方向的滑动长度，来判断上滑或是下滑，由此实现触摸滑动的功能。

更多信息联系我的微

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1.x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

echarts在小程序中滑动卡顿

由于微信小程序中，echarts的层级最高，无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug，我只能委屈求全了。打开ec-canvas.wxml文件，将touchStart、touchMove和touchEnd去掉了，直接删除就好啦。这三个事件应该是做缩放的吧，我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求，还是没有真正的解决问题。

原：

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

现：

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的，可以直接使用图片代替cannvas，即在echarts渲染完毕后将它替换为一张图片。

如果我更新了数据，那么就重新放出echarts，等它渲染完毕后，再次替换为一张图片。

chart.on('finished', () =>{

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res =>{

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

      })

},

    fail: res =>console.log('转换图片失败', res)

})

})

render:

this.state.echartImgSrc =='' ?

  ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={this.state.ec}

/>

:

<CoverImage src={this.state.echartImgSrc}></CoverImage>

---