scroll-view

• scroll-view是可滾動(dòng)的區(qū)域，在這個(gè)區(qū)域中如果內(nèi)部的內(nèi)容超出了這個(gè)區(qū)域，就可以通過滾動(dòng)查看超出區(qū)域的內(nèi)容，因此使用scroll-view時(shí)通常要為它設(shè)置一個(gè)具體高度

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

• scroll-view的相關(guān)屬性
  • scroll-y 允許縱向滾動(dòng)
  • scroll-x 允許橫向滾動(dòng)

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

相關(guān)滾動(dòng)事件

回到頁面頂部

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

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

上拉加載更多

• 上拉加載更多有兩種實(shí)現(xiàn)方式

  1.監(jiān)聽scroll-view上的bindscrolltoupper事件

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

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

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

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

下拉刷新頁面

• 調(diào)用onPullDownRefresh()方法可刷新頁面，默認(rèn)刷新時(shí)間為2s，因此當(dāng)成功請求到數(shù)據(jù)時(shí)，我們通過手動(dòng)的調(diào)用wx.stopPullDownRefresh()關(guān)閉刷新可以帶來更佳的用戶體驗(yàn)

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

getGoodsList() {
    ...
    console.log('成功請求到數(shù)據(jù)')
    // 手動(dòng)關(guān)閉刷新過程    
    wx.stopPullDownRefresh()
}

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

 "window": {
    "enablePullDownRefresh": true //全局
    "backgroundTextStyle": "dark" //頂部顯示顏色為白色的三個(gè)點(diǎn)
  }