微信小程序~下拉刷新PullDownRefresh

一、onPullDownRefresh回调

代码:

  //  http://itlao5.com
  onPullDownRefresh: function () {
    console.log(‘onPullDownRefresh‘)
    this.queryData(id)
  },
二、enablePullDownRefresh支持

然而=下拉触发不了js回调,需要再json中配置支持下拉刷新,即:

"enablePullDownRefresh": true  // 请注意是true,不是"true"字符串,
                               // 部分开发者发现设置了还是无效,
                               // 可能是因为设置的"enablePullDownRefresh": "true"

这个可以在app.json中进行全局配置,使所有页面都带有下拉刷新功能;也可以在需要下拉刷新功能的page对应的json中配置。
这下好了,下拉刷新功能完成了。

三、backgroundTextStyle配置

但是,还有一点点不完美的地方,别人的小程序,下拉刷新时,可以看到顶部有三个点闪烁的动画;而此时小程序顶部一片空白。
原来,还有一个配置,"backgroundTextStyle": "",支持 dark/light;因为我的背景是白色的,此时,不进行这个配置,因为颜色的缘故,三个点闪烁的动画就看不到了,因此,白色背景需要进行以下配置:

"backgroundTextStyle": "dark"
 
四、stopPullDownRefresh停止

此外,微信小程序还提供了停止下拉刷新效果的api,如果发现进入刷新状态,无法停止,可以使用这个api

  // 小程序提供的api,通知页面停止下拉刷新效果
  wx.stopPullDownRefresh;

.

原文地址:https://www.cnblogs.com/jianxian/p/11122822.html

时间: 2024-10-07 19:44:53

微信小程序~下拉刷新PullDownRefresh的相关文章

微信小程序 下拉刷新 上拉加载

1.下拉刷新  小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新. 具体页面的.json文件: 1 { 2 "enablePullDownRefresh": true 3 } app.json文件: 1 "window": { 2 "enablePullD

微信小程序下拉刷新和上拉加载

1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">    <block wx:for="{{goodsLi

微信小程序开发——微信小程序下拉刷新真机无法弹回

开发工具中下拉之后页面回弹有一定的延迟,这个时间也有点久.真机测试,下拉后连回弹都没有,这个问题要解决,就得在下拉函数里加上停止下拉刷新的API,如下: /** * 下拉刷新 */ onPullDownRefresh: function(e) { this.getList() wx.stopPullDownRefresh(); } 原文地址:https://www.cnblogs.com/xyyt/p/10855817.html

微信小程序~下拉刷新真机测试不弹回的处理办法

问题描述: 下拉刷新在手机上不会自动回弹,开发工具可以 解决办法: 主动调用wx.stopPullDownRefresh /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log('onPullDownRefresh') // 3秒模拟数据加载 setTimeout(function () { // 不加这个方法真机下拉会一直处于刷新状态,无法复位 wx.stopPullDownRefresh() },

微信小程序下拉刷新无法弹回

在下拉刷新函数使用   wx.stopPullDownRefresh() 原文地址:https://www.cnblogs.com/zcc0912/p/11881283.html

[微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

微信小程序下拉滚动选择器picker绑定数据的两种方式  本地数据绑定和wx.request(OBJECT) json数据绑定 1.本地数据绑定 (对象数组) Page({ data:{ //户型 这是一个本地的对象,然后绑定到页面上 pic_array: [ { id: 13, name: '1室1厅1卫' }, { id: 14, name: '1室2厅1卫' }, { id: 15, name: '2室1厅1卫' }, { id: 16, name: '3室1厅2卫' }, { id: 1

关于微信小程序下拉出现三个小点

包子这天看美团外卖的小程序,再瞅瞅自己的背景色,发现,美团下拉的时候有三个小点,但是我自己的校车徐下拉的时候没有三个小点,很是郁闷,于是各种的找各种的找,发现,这三个小点是微信小程序自带的,你只需要设置一下全局的背景色就ok了,设置全局的背景色在app.json里面设置就行,记住,是设置这个属性backgroundColor,不是这个属性:navigationBarBackgroundColor.....谨记谨记......这个定位我在上次说过了,接了百度地图的api.....

小程序下拉刷新

1.通过scroll-view实现 开始用scroll-view组件,通过scroll-view自带的触发下拉刷新.上拉加载事件. 在iOS下,可以正常触发,但在安卓机型下,必须先上滑一段距离再下滑,才能够触发下拉刷新事件,体验不太好.向小程序官方反馈,给我的回答是安卓机型不支持反弹效果. 上图是官网中关于scroll-view的内容,顺着思路,开始研究页面的滚动...继续改bug... 2.通过 onPullDownRefresh实现 1)需要在 .json 文件中配置.(.json 文件的格

微信小程序之下拉刷新,上拉更多列表实现

代码地址如下:<br>http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 目录结构说明 二.程序实现 1.运行开发工具 选择「本地小程序项目」 2.新建项目 3.开启接口域名免校验 4.运行效果 三.功能说明 1.通过page方式实现下拉刷新,上拉更多列表 onPullDownRef