我们平时在浏览手机网页或者小程序内容的时候，经常会遇到内容很多时，需要通过下拉刷新或者上拉加载更多，来显示更多的内容，因此对于小程序项目的开发人员来说，这个功能是少不了的，因为能极大的提高用户的浏览体验，今天厦门在乎科技为大家带来小程序下拉刷新与加载更多功能介绍，一起来了解一下吧。
小程序下拉刷新与加载更多：
下拉刷新
实现下拉刷新目前能想到的有两种方式
1. 调用系统的API，系统有提供下拉刷新的API接口
2. 监听scroll-view,自定义下拉刷新，还记得scroll-view里面有一个bindscrolltoupper属性吗?当滚动到顶部/左边，会触发 scrolltoupper 事件，所以我们可以利用这个属性，来实现下拉刷新功能。
两种方法都可以，第一种比较简单，易上手，毕竟一些逻辑系统已经给你处理好了，第二种适合那种想要自定义下拉刷新样式的小程序，初识就用第一种，系统提供的就好。以首页为例
1. home.json 参数配置
"enablePullDownRefresh": true
我们哪个页面需要下拉刷新，就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道，是否允许下拉刷新，当然，如何你不想一个个配置允许下拉刷新，你可以直接在全局变量app.json的window里面配置上面这个属性，这样整个项目都允许下拉刷新了,这个一定要加的，因为系统默认是不具备下拉刷新功能的
2. home.js
//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},
代码中的onPullDownRefresh 方法用于下拉刷新事件的监听，具体看一下里面的代码，wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来控制小菊花的显示和隐藏，由于我们现在还没有讲解网络请求，所以我就模拟了一下网络加载，通过setTimeout方法，写一个时间延迟的方法，这个方法可以模拟网络加载所消耗的时间，还有就是当网络加载完成我们要停止下拉刷新wx.stopPullDownRefresh()
这个到目前为止下拉刷新的功能已经完成了，但是还不够完美，还是有点怪怪的，就是下拉刷新没有动画，有木有~我那时也感到奇怪，微信封装的下拉刷新怎么可能这样呐，后来我参考别人写的代码，发现一个小坑，其实很简单，只需要一句话代码在app.json中window里配置下面属性，这个是配置整个系统的背景颜色，为什么我配置系统颜色就会出现下拉刷新了呐，原因就在下拉刷新的动画本身就有，只不过当我们没配置背景颜色，系统默认就为白色，动画也是白色，所以我们就看不到动画效果。
"backgroundColor": "#f0145a"
加载更多
实现加载更多也同理有两种方式
1. 调用系统的API
2. 监听scroll-view，bindscrolltolower滑动到底部的监听
我还是拿第一种实现方式讲解，处理方式和下拉刷新略有不同，不过也大同小异吧，还是以首页为例
1. home.js
//加载更多
onReachBottom: function () {
console.log('加载更多')
setTimeout(() => {
this.setData({
isHideLoadMore: true,
recommends: [
{
goodId: 7,
name: 'OLAY玉兰油精油沐浴露玫瑰滋养二合一450ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
newprice: "￥36.60",
oldprice: "￥40.00",
},
{
goodId: 10,
name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
newprice: "￥30.00",
oldprice: "￥80.00",
}, {
goodId: 11,
name: 'Lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
newprice: "￥30.00",
oldprice: "￥80.00",
},
{
goodId: 12,
name: '美国CLINIQUE倩碧黄油无油/特效润肤露125ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
newprice: "￥239.00",
oldprice: "￥320.00",
},
{
goodId: 13,
name: '法国LANCOME兰蔻柔皙轻透隔离防晒乳霜50ML2017年3月到期',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',
newprice: "￥130.00",
oldprice: "￥180.00",
},
],
})
}, 1000)
}
onReachBottom系统提供的触底事件的监听，和下拉刷新一样，我们也是模拟一些数据，加了一个时间延迟的事件，isHideLoadMore，一个自定义的值，用来控制显示和隐藏加载控件
2. home.wxml
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
在home.wxml底部加入上面的代码，这是加载更多的控件，加载更多待遇就没下拉刷新待遇好，系统并没有提供加载更多的控件动画，所以我们需要自己制作
以上就是今天为大家带来的关于“微信小程序下拉加载更多 小程序下拉刷新与加载更多”全部内容，下拉刷新和加载更多都是作为开发者需要掌握的内容，同时也是每个小程序和app都必须具备的功能，想要了解更多关于小程序开发的内容，欢迎关注厦门在乎科技-专注小程序、app、网站开发
