微信小程式 transform 實現 慣性滾動,回彈效果 【下拉回彈】
阿新 • • 發佈:2020-07-13
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 }) }})