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