微信小程序下拉刷新组件加载图片(三个小点)不显示的问题

问题是微信小程序中列表页面下拉刷新，顶部不显示三个小点的刷新状态，如下图：

解决后：

1 微信小程序实现下拉刷新

1.1 首先是在对应的页面 json 中添加配置

核心：

 "enablePullDownRefresh":true,"backgroundTextStyle": "dark"

完整的

{"usingComponents": {},"navigationBarTitleText": "采集列表","enablePullDownRefresh":true,"backgroundTextStyle": "dark"
}

1.2 然后在页面对应的js中处理 onPullDownRefresh 函数

    /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.onRefresh()},onRefresh:function(){//导航条加载动画wx.showNavigationBarLoading();//重置分页加载页面this.data.current_page=1//网络请求数据this.getManagerSampleListFunction()//超时隐藏setTimeout(function () {wx.hideNavigationBarLoading();//停止下拉刷新wx.stopPullDownRefresh();}, 2000);},

本次分享使用的网络请求框架为 fly 框架，会在近期给大家分享

  //网络请求数据getManagerSampleListFunction() {api.fetchManngerSampleList().then(res => {//停止下拉刷新wx.hideNavigationBarLoading();//停止下拉刷新wx.stopPullDownRefresh();//处理数据 if (this.data.current_page == 1) {} else {}})},

2 特别需要注意的是：

写之前先看看有无已经存在的onPullDownRefresh:function()函数，否则将不能监听到用户的下拉刷新动作

注意相关api的配对使用

状态栏显示加载中 wx.showNavigationBarLoading(Object object) 与wx.hideNavigationBarLoading(Object object)
显示加载中弹框 wx.showLoading(Object object)与wx.hideLoading(Object object)
触发下拉刷新 wx.startPullDownRefresh(Object object) 与 wx.stopPullDownRefresh()

不要忘了在需要刷新结束时调用wx.stopPullDownRefresh()，否则，页面将会保持下拉状态、不会回弹。

完毕

微信小程序下拉刷新组件加载图片(三个小点)不显示的问题相关推荐

小程序下拉刷新数据加载完毕时停止loading效果
1.在加载数据函数里加cb 方便回调 2.在数据加载完成时(complete)用 cb && cb()来判断是否有回调函数,如果有则调用. 3.在触发上拉刷新时,在调用加载数据的函数里 ...
微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
小程序下拉刷新的实现
小程序下拉刷新 1.使用onPullDownRefresh()这个方法来实现下拉刷新例子如下: // 页面下拉刷新 onPullDownRefresh() { this.loadSwiper();/ ...

微信小程序下拉刷新组件加载图片(三个小点)不显示的问题

1 微信小程序实现下拉刷新

1.1 首先是在对应的页面 json 中添加配置

1.2 然后在页面对应的js中处理 onPullDownRefresh 函数

2 特别需要注意的是：

微信小程序下拉刷新组件加载图片(三个小点)不显示的问题相关推荐

最新文章

热门文章

微信小程序下拉刷新组件加载图片(三个小点)不显示的问题

1 微信小程序实现下拉刷新

1.1 首先是在对应的页面 json 中添加配置

1.2 然后在页面对应的js中 处理 onPullDownRefresh 函数

2 特别需要注意的是：

微信小程序下拉刷新组件加载图片(三个小点)不显示的问题相关推荐

最新文章

热门文章

1.2 然后在页面对应的js中处理 onPullDownRefresh 函数