微信小程序下拉刷新

news2024/11/21 2:21:56

一、如何设置微信小程序所有页面都可以下拉刷新呢?

1、在app.json的"window"中进行配置
(1)把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark”
(2)添加"enablePullDownRefresh":true,开启下拉刷新。

2、在app.js中增加两个生命周期函数

onPullDownRefresh:function(){
    this.onRefresh();
  },
onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading();
    setTimeout(function () {
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000);
  },

二、如何设置微信小程序单独页面下拉刷新呢?

1、首先在页面的json文件中添加设置:
“enablePullDownRefresh”: true
也就是写成下面这样子:

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

2、在js文件中写一个onRefresh()生命周期:

onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading()
    //loading 提示框
    wx.showLoading({
      title: 'Loading...',
    })
    console.log("下拉刷新啦");
    setTimeout(function () {
      wx.hideLoading();
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000)
  },

2、在onPullDownRefresh()中调用上面写的函数:

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh:function(){
    this.onRefresh();
  },

效果:
在这里插入图片描述

这样就可以啦,自己设置刷新时间哦。有疑问请在下方留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408743.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【青山css】css3阴影效果属性详解及创意玩法

前言 css阴影效果是我们经常使用的一个css属性,但你有仔细了解过它吗?是不是用的时候直接从蓝湖上复制过来就行了,那你了解它的每个参数吗?用阴影又能实现哪些好看的效果呢?来看一看我收集总结的css阴影知识吧&#x…

js执行顺序

1.首先js是单线程的 所有的同步任务都是按顺序依次执行的,前面的执行完了之后才会执行后面的任务。遇到计算量大的代码就会阻塞在这里。下面的代码就是打印输出10000次,当循环走完了之后 才会走后面的代码,输出的时间是981ms 输出981ms 2.因…

Plugin [id: ‘com.android.application‘, version: ‘7.*.*‘, apply: false] was not found 的解决办法

呜呜~ 在新建项目File->New->New Project->Empty Activity 后遇到以下情况:Plugin [id: com.android.application, version: 7.2.2, apply: false] was not found in any of the following sources: 问题1:配置了 proxy 把File | Settings | A…

vue3中使用vue-i18n(ts中使用$t, vue3不用this)

vue项目里多语言工具一直用的vue-i18n。 以前用的 vue2,也没啥大问题,就是配置好之后用t(“你的属性名”)就行,现在用vue3其实本来也没太大变化。 但是配置完之后,在html中用$t()没有问题,显示文案什么的一切正常。而在…

关于前端提示err_ssl_protocol_error错误的一次记录

当前端提示错误的时候按照 1.同步系统的时间,日期和区域 Chrome上出现“ err_SSL_protocol_error”的最常见原因之一是错误的时间和日期配置。错误的时区选择也会导致此错误。如果您在设备上遇到此错误,请快速修改时间,数据和区域设置。如果该…

2023高频前端面试题(持续更新 含答案)

1,es6有哪些新特性?ES6是2015年推出的一个新的版本、这个版本相对于ES5的语法做了很多的优化let和const具有块级作用域,不存在变量提升的问题。新增了箭头函数,简化了定义函数的写法,同时可以巧用箭头函数的this、&…

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

活动地址:CSDN21天学习挑战赛 用代码写出浪漫合集(爱心、玫瑰花) 本文目录: ​一、前言 二、用python、matplotlib、Matlab、java绘制爱心 (1)爱心图形1(弧线型)(显示…

【微信小程序】-- 案例 - 自定义 tabBar(四十六)

💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &…

uniapp 使用第三方UI库 uview-plus

前言:开发uniapp时,有些功能,使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库,根据网上和uniapp的插件市场,确定使用uviewUI库。 uniapp项目使用的vue2 -----> 对应 uView uniapp项目使用vue3 -…

css3渐变色

作用:让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类:分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction…

Vue的事件处理,点击事件

目录 1、 v-on:click 绑定属性示例: 2、 v-on:click 绑定方法示例: 3、 v-on:click 绑定特殊变量示例: 4、事件处理的修饰符 按键修饰符: v-model表单修饰符: v-bind指令修饰符: 监听DOM事件使用的是v…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

使用python搭建一个简易的Web服务

介绍 简单的说,web服务器就是机器上监听了本地的IP和端口的一个进程,当有客户的请求进来时,它会响应客户的请求并返回相应的信息。客户端和服务端之间的通信基于HTTP协议,客户端可以是浏览器或者任何支持HTTP的应用。我们平时访问…

vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

1、自定义布局 查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: 目标效果: 在实…

OpenAI 成近期顶流团队?如何使用 OpenAI 和 Node.js 构建 AI 图像生成器?

摘要: 12月7号,知名人工智能研究机构 Open AI 在Youtub上发布视频介绍使用OpenAI 和 DALL-E 模型创建一个网络应用程序,该应用程序将根据输入的文本从头开始生成图像。https://www.youtube.com/watch?vfU4o_BKaUZE 前言💖 大家好&#xff0…

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

文章目录1. 复现错误2. 分析错误3. 解决错误4. 其他方法解决该错误1. 复现错误 在搭建vue-cli环境,用nginx做代理服务器,访问时却显示:Invalid Host header。 2. 分析错误 知其然,知其所以然,我们在解决该问题之前&am…

支付宝手机网站H5支付

手机网站支付产品介绍 | 网页&移动应用 为方便商家在移动端网页应用中集成支付宝支付功能,支付宝提供了手机网站支付能力。 流程简介:商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块,商家网页会跳转…

【报错】npm install --save core-js/modules/es.array.push.js

代码写着写着,一运行突然就报了下面这么个错误 一开始没细看,以为是自己代码逻辑哪里写错,但是检查了一遍下来,好像没啥问题呀 然后后面就跟着执行了一下npm install --save core-js/modules/es.array.push.js 哦豁,还…

【自学前端】我只学这些够吗?好难

表弟也终于到了马上要大学毕业的时间,然后听说我在做前端开发工作,就想着能不能和我一起搞一搞。 我说这又不是小时候一起去地里抓兔子,说走就一起走,拿上工具一起走了,这得学啊。看着表弟期待的眼神,他问了…

【CTF】buuctf web 详解(持续更新)

buuctf web[HCTF 2018]WarmUp[极客大挑战 2019]EasySQL[极客大挑战 2019]Havefun[强网杯 2019]随便注[ACTF2020 新生赛]Include[SUCTF 2019]EasySQL[极客大挑战 2019]Secret File[ACTF2020 新生赛]Exec[极客大挑战 2019]LoveSQL[GXYCTF2019]Ping Ping Ping[极客大挑战 2019]Kni…