小程序滚动及相关滚动事件
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" //顶部显示颜色为白色的三个点
}