html回弹效果,微信小程序 transform 实现 惯性滚动，回弹效果 【下拉回弹】

1. 新建Scroll文件

2. 在Scroll/index.wxml文件中写入如下代码

style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">

你好，我想实现 “惯性滚动，回弹效果”，请下拉我

3. 在Scroll/index.js 文件中写入如下代码

Page({

data: {

starty: 0, //开始的位置x

endy: 0, //结束的位置y

margintop: 0, //滑动下拉距离

},

onLoad() {

},

scrollTouchstart: function (e) {

let py = e.touches[0].pageY;

this.setData({

starty: py

})

},

scrollTouchmove: function (e) {

let py = e.touches[0].pageY;

let d = this.data;

this.setData({

endy: py,

})

if (py - d.starty < 50 && py - d.starty > -50) {

this.setData({

margintop: py - d.starty

})

}

},

scrollTouchend: function (e) {

this.setData({

starty: 0,

endy: 0,

margintop: 0

})

}

})

原文：https://www.cnblogs.com/gqx-html/p/13292264.html