小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序滚动及其滚动事件

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

scroll-view

  • scroll-view是可滚动的区域,在这个区域中如果内部的内容超出了这个区域,就可以通过滚动查看超出区域的内容,因此使用scroll-view时通常要为它设置一个具体高度

    {{item}}
  • scroll-view的相关属性

  • scroll-y 允许纵向滚动

  • scroll-x 允许横向滚动

相关滚动事件

回到页面顶部

  • wx.pageScrollTo():自定义滚动到某位置

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300 //滚动到顶部所需要的事件
})

上拉加载更多

  • 上拉加载更多有两种实现方式

1.监听scroll-view上的bindscrolltoupper事件


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


联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了