小程序滚动及相关滚动事件

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" //顶部显示颜色为白色的三个点
  }