1. 新建Scroll文件
2. 在Scroll/index.wxml文件中写入如下代码
<view class="Scroll-container">
<view class="content-all" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend"
style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">
<view>
你好，我想实现 “惯性滚动，回弹效果”，请下拉我
</view>
</view>
</view>
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
})
}
})
微信小程序 transform 实现 惯性滚动，回弹效果 【下拉回弹】
原文：https://www.cnblogs.com/gqx-html/p/13292264.html