前情提要

下拉刷新一定是移动端常用操作，微信小程序官方集成了下拉刷新监听函数onPullDownRefresh(),以及显示下拉动画apiwx.showNavigationBarLoading(),但是我们在初次接触这个api发现，调用该函数动画不显示；

原因分析

下拉刷新后页面背景属于配置背景，我们可以在全局配置或者.json文件中配置，笔者在实战中发现，这个动画其实是存在的，只是它被一个属性给影响了，那就是backgroundTextStyle,来看官方文档

实战解析

如果你只是去简单的了解API和函数监听，而不来看配置文档相关的东西，那么你永远不会发现，这个属性配置的就是下拉loading样式，那为什么我们的样式不显示呢？
原因就是：窗口的背景色是白色，loading样式也是白色，障眼法了，那我们来修改下配置，测试一番

在.json页面配置backgroundColor

{"usingComponents": {},"enablePullDownRefresh":true,"backgroundColor":"#000000" //给黑色背景
}

查看效果

看，下拉点出来了，这里我的布局样式显得有点尴尬，因为我用的自定义头部，亲测手机端是从最顶端刷新的，所以问题就算解决了，但是我们要的可不是这个效果，而是如下配置：

{"usingComponents": {},"enablePullDownRefresh":true,"backgroundTextStyle":"dark"
}

最后

微信小程序实战 wx.showNavigationBarLoading()，下拉动画配置无效相关推荐

微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
微信小程序直播间实现下拉刷新(目前全网最优最美观的方法)
微信小程序直播间实现下拉刷新先上效果: 1.下拉距离一定时出现动画,保持下拉直到距离足够大时触发函数加载直播间列表,而且在足够大距离时会有振动反馈,增强用户体验 2.下拉小距离出现动画,此时释放不会 ...
this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新
微信小程序蕴含着众多功能,本期将简单介绍实现页面下拉刷新的方法,通过阅读本文,读者们可以自行动手操作,在实践中认识微信小程序. 首先,我们需在json配置中写出以下配置: "enablePu ...
微信小程序实现循环列表下拉功能（点击事件）
在微信小程序里有下拉功能如果循环列表当执行点击事件的时候就会同时执行.下面主要实现了循环列表的点击事件操作.(也有数据里面嵌套数据) wxml <view class="sele ...
微信小程序自定义navigationbar与下拉刷新思考
第一次开发小程序,产品提出要求导航栏字体样式,然后系统的未提供修改的接口. 那么只能自定义导航栏才行呀. 迅速的自定义了一个导航栏 app.json中添加 "navigationStyle& ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序（2）--下拉刷新和上拉加载更多
下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...
微信小程序简单易用下拉框组件
由于公司项目需要,自己开发了一个微信小组件--Miche_mini_select下拉框本下拉框特点: 1.保证下拉框在最上层,不会被其他控件所遮挡 2.引用方便,直接引用组件即可,与页面耦合性低 3 ...
微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载
样式基于weui 首先需要配置页面的json文件,启用下拉刷新 {"enablePullDownRefresh": true } 在WXML里,通过列表渲染即可显示数据 <v ...

微信小程序实战 wx.showNavigationBarLoading()，下拉动画配置无效

文章目录

前情提要

原因分析

实战解析

最后

微信小程序实战 wx.showNavigationBarLoading()，下拉动画配置无效相关推荐

最新文章

热门文章