小程序中下拉刷新页面的功能怎么实现?

作者 : OO资源中心 发布时间: 2020-05-10 文章热度:228 共1856个字,阅读需5分钟。 本文内容有更新 字体:

小程序中下拉刷新页面的功能怎么实现?下面本篇文章给大家介绍一下微信小程序界面下拉刷新实现方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

小程序中下拉刷新页面的功能怎么实现?

微信小程序中,通过下拉刷新页面是基本操作,在当前页面排满的情况下继续下拉加载更多内容。小程序和网页都可以实现这一功能,不同的是小程序界面有能实现下拉刷新功能的API,只需从系统调用即可。

通过查看微信开发文档可知,enablePullDownRefresh 这个属性设置为true。就默认开启了下拉刷新。enablePullDownRefresh可以写在app.json 中 和页面的xxx.json,两者的区别是,app.json 是全局型的下拉刷新,而***.json 是单个页面的下拉刷新,只能设置window相关的配置项,以决定本页面的窗口表现,所以无需写window这个键。另一种方法是,监听scroll-view,自定义下拉刷新,scroll-view里面有一个bindscrolltoupper属性,当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。

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

1. home.json 参数配置

enablePullDownRefresh: true

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

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

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

加载更多

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

1. 调用系统的API

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

处理方式和下拉刷新略有不同,不过也大同小异。

home.js

onReachBottom: function () {
console.log('加载更多')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:'.....',
url: '....',
imageurl:'......',
},
{
goodId: 10,
name:'......',
url:'......',
},
],
})
}, 1000)
}

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

home.wxml

正在加载

小程序中可以实现下拉刷新的方法还有其他,可以模仿H5网页的做法,但微信小程序因为API接口的使用,在实现下拉刷新功能的时候就可以减轻开发人员负担。

推荐:《》

相关推荐: 小程序开发接入微信支付功能的方法介绍

随着小程序的推出,微信也开放了小程序的支付功能,而小程序文档里关于微信支付接口只有一个requestPayment函数的描述。requestPayment函数的确是微信小程序前端唯一需要调用到的函数,但想实现小程序接入微信支付功能远不止一个函数,对于没有接入过…

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载资源需要解压密码,解压密码是什么?
如下载的资源需要解压密码,请查看下载页右侧查找解压密码;
如没有解压密码请尝试默认解压密码:www.oo.ink 或者 oo.ink
或者联系我们获取解压密码!
1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

OO.INK资源网 » 小程序中下拉刷新页面的功能怎么实现?
+已在风雨中度过
为兴趣而改变,为梦想而努力!
+已坚持更新
时时更新,确保最新~

开通SVIP,畅享全站资源下载~

立即了解