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