微信小程序—下拉刷新上拉加载

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<
4000
/span>;
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;
}