1. 程式人生 > 實用技巧 >微信小程式 transform 實現 慣性滾動,回彈效果 【下拉回彈】

微信小程式 transform 實現 慣性滾動,回彈效果 【下拉回彈】

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
    })
  }
})