1.使用scroll-view实现下拉刷新上拉加载
<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="refresh">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.image}}"></image>
<view class="text">
<text class="title">{{item.title}}</text>
<text class="description">{{item.pubdate}}"</text>
</view>
</view>
</scroll-view>
先写一个布局 类似于android 的listview item的布局 外边用scroll-view包裹。item布局样式用css去实现。
scroll-view 熟悉介绍 参考官方文档 这里写链接内容
注意:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。设定高度才能监听到 滑动事件。
通过bindscrolltolower=”bindDownLoad” bindscrolltoupper=”refresh”实现下拉刷新和上拉加载。
高度的获得
onLoad: function () {
// 这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success: function (res) {
console.info(res.windowHeight);
that.setData({
scrollHeight: res.windowHeight
});
}
});
},
或者在onshow方法中
2.通过 onPullDownRefresh实现
注意:onPullDownRefresh和scroll-view不能同时使用
- 需要在 .json 文件中配置。(.json 文件的格式和 app.json与具体页面的.json文件的区别,前文已经讲过,有疑问的可以移步。) 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。
具体页面的.json文件:
{
"enablePullDownRefresh": true
}
app.json文件:
"window": {
"enablePullDownRefresh": true
}
- 在js文件中添加回调函数
// 下拉刷新回调接口
onPullDownRefresh: function () {
// do somthing
},
3 .上拉加载
同下拉刷新一样,小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍,经测试发现,上拉回调的接口并不需要额外的配置(下拉时需要在 .json文件中配置 “enablePullDownRefresh”: true),直接在页面滑动到底部时就能拿到回调。
- 在js文件中添加回调函数
// 上拉加载回调接口
onReachBottom: function () {
},
var items = that.data.list.concat(res.data.books);
that.setData({
list: items,
});
通过concat方法进行数组的连接,实现上拉更多。
隐藏scroll-view滚动条
在相应的css文件中加入一下代码
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}