小程序滾動及相關滾動事件

scroll-view

• scroll-view是可滾動的區域，在這個區域中如果內部的內容超出了這個區域，就可以通過滾動查看超出區域的內容，因此使用scroll-view時通常要為它設置一個具體高度

<scroll-view scroll-y class="left_menu" style="height: 300rpx;">
    <view class="menu_item" bindtap="handleItemTab" >{{item}}</view>
</scroll-view>

• scroll-view的相關屬性
  • scroll-y 允許縱向滾動
  • scroll-x 允許橫向滾動

更多屬性請查看： (https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)

相關滾動事件

回到頁面頂部

• wx.pageScrollTo()：自定義滾動到某位置

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300 //滾動到頂部所需要的事件
})

上拉加載更多

• 上拉加載更多有兩種實現方式

  1.監聽scroll-view上的bindscrolltoupper事件

  <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper"></scroll-view> 
  

  upper(e) {
      console.log('請求更多數據')
  },
  

  2.使用小程序的聲明周期函數onReachBottom()

  onReachBottom(){
      console.log('請求更多數據')
  }
  

下拉刷新頁面

• 調用onPullDownRefresh()方法可刷新頁面，默認刷新時間為2s，因此當成功請求到數據時，我們通過手動的調用wx.stopPullDownRefresh()關閉刷新可以帶來更佳的用戶體驗

onPullDownRefresh() {
  // 重置商品數組
  this.setData({
    goodsList: [],
  })
  // 重置頁碼
  this.QueryParams.pagenum = 1
  // 重新請求商品
  this.getGoodsList()
}

getGoodsList() {
    ...
    console.log('成功請求到數據')
    // 手動關閉刷新過程    
    wx.stopPullDownRefresh()
}

• 下拉刷新不是簡單調用一下onPullDownRefresh()方法就可以了的，還需要在全局配置.json文件中設置 "enablePullDownRefresh": true,用於開啟頁面下拉加載效果

 "window": {
    "enablePullDownRefresh": true //全局
    "backgroundTextStyle": "dark" //頂部顯示顏色為白色的三個點
  }