微信小程序实战篇-下拉刷新与加载更多插图

哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我换了一个命名的方式,把每篇要讲解的主要内容做为标题,这样方便以后你们忘记知识点,要回顾的时候可以快速查找的到,有木有很贴心啊~,不要迷恋哥,哥只是个传说。好了不开玩笑啦,回到正题上来,请看标题,木错,我们要讲解一下下拉刷新与加载更多。

下拉刷新

实现下拉刷新目前能想到的有两种方式

调用系统的API,系统有提供下拉刷新的API接口

微信小程序实战篇-下拉刷新与加载更多插图1

监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?忘记请自行回顾上一篇微信小程序实战篇-电商(二)当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。

两种方法都可以,种比较简单,易上手,毕竟一些逻辑系统已经给你处理好了,第二种适合那种想要自定义下拉刷新样式的小程序,我们讲解电商,用种,系统提供的好,主要是教会大家怎么用。以首页为例

home.json 参数配置

微信小程序实战篇-下拉刷新与加载更多插图2

我们哪个页面需要下拉刷新,在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道,是否允许下拉刷新,当然,如何你不想一个个配置允许下拉刷新,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下拉刷新了,这个一定要加的,因为系统默认是不具备下拉刷新功能的

home.js

微信小程序实战篇-下拉刷新与加载更多插图3

微信小程序实战篇-下拉刷新与加载更多插图4

onPullDownRefresh下拉刷新事件监听,具体看一下里面的代码,wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来控制小菊花的显示和隐藏,由于我们现在还没有讲解网络请求,所以我模拟了一下网络加载,通过setTimeout方法,写一个时间延迟的方法,这个方法可以模拟网络加载所消耗的时间,还有是当网络加载完成我们要停止下拉刷新wx.stopPullDownRefresh() 。

这个到目前为止下拉刷新的功能已经完成了,但是还不够完美,还是有点怪怪的,是下拉刷新没有动画,有木有~我那时也感到奇怪,微信封装的下拉刷新怎么可能这样呐,后来我参考别人写的代码,发现一个小坑,先看一下我填完坑的效果吧

微信小程序实战篇-下拉刷新与加载更多插图5

怎么样,是不是顺眼多了,想知道我是怎么加入这个动画的嘛,让我来给你揭晓,其实很简单,只需要一句话代码在app.json中window里配置下面属性,这个是配置整个系统的背景颜色,为什么我配置系统颜色会出现下拉刷新了呐,原因在下拉刷新的动画本身有,只不过当我们没配置背景颜色,系统默认为白色,动画也是白色,所以我们看不到动画效果,是不是有点坑,哈哈~~

微信小程序实战篇-下拉刷新与加载更多插图6

加载更多

实现加载更多也同理有两种方式

调用系统的API

监听scroll-view,bindscrolltolower滑动到底部的监听

我还是拿种实现方式讲解,处理方式和下拉刷新略有不同,不过也大同小异吧,还是以首页为例

home.js

微信小程序实战篇-下拉刷新与加载更多插图7

onReachBottom系统提供的触底事件的监听,和下拉刷新一样,我们也是模拟一些数据,加了一个时间延迟的事件,isHideLoadMore,一个自定义的值,用来控制显示和隐藏加载控件

home.wxml微信小程序实战篇-下拉刷新与加载更多插图8

在home.wxml底部加入上面的代码,这是加载更多的控件,加载更多待遇没下拉刷新待遇好,系统并没有提供加载更多的控件动画,所以我们需要自己制作

home.wxss

微信小程序实战篇-下拉刷新与加载更多插图9

这个是我们自定义的样式,样式很简单,是一个简单的加载小菊花,这里我要讲解的是 weui-loading 样式里设置 background,data:image/svg+xml;base64这个是什么意思呐,我们之前一般设置背景直接加入颜色,这个是background的另一种用法,加入图片,这个图片还有点特别是base64格式,并用svg绘制的,当然你还可以直接把url里面写入图片路径也是可以的,好,下面我们一起看一下效果吧!

微信小程序实战篇-下拉刷新与加载更多插图10

总结

讲到这里,下拉刷新和加载更多都是前端程序必备的知识,几乎所有APP里都有下拉刷新和加载更多,所以大家一定要掌握,这里主要讲解的是小程序自带的下拉刷新与加载更多API,大家可以试着挑战一下用第二种方式,实现一下~

关注公众号获取新文章

微信小程序实战篇-下拉刷新与加载更多插图11

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: