小程序模板网

微信小程序滚动及其滚动事件

2021-06-23 抢时间

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26703.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询