微信小程序如何刷新当前界面的实现方法

2024-09-27 16:31:28

在微信小程序开发的过程中，在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来，但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作。下面介绍一下微信小程序刷新当前界面的几种方法。

方法一：this.onLoad()

使用方法：在操作函数中调用this.onLoad()或that.onLoad()（有时候this的作用域不够的时候需要定义that = this）。

适用场景：本次操作对页面onLoad函数所携带的各种参数没有影响。这时候我们在页面第一次执行onLoad函数的时候可以定义一个变量_options将onLoad函数的参数options存储到这个变量中，等操作函数执行完毕时，调用this.onLoad(_options)，如果本次操作之后下一次该界面加载时onLoad函数的options变量发生了改变则使用该方法无效。

方法二：this.onReady() 或者 this.onShow()（亲测有效）

使用方法：在操作函数中调用this.onReady()函数。

使用前提：本页面的数据操作需要在页面的onReady()或onShow()函数中完成。

方法三：定义标志

使用方法：在app.js中，定义一个全局变量Flag，默认值为false，进入其它页面的时候将它置为true,在页面的onShow方法里加一个判断,如果Flag为true的话，先将它的值设置为false，再调用接口获取数据。代码如下：

onShow: function(){
   if (app.globalData.Flag) {
      app.globalData.Flag = false;
      this.getData();//调用接口获取数据
   }
}

这种方法虽然感觉有点复杂而且笨重，但是确实可以解决实际问题。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

微信小程序局部刷新触发整页刷新效果的实现代码

效果图如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,选项栏又无法固定,所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onPageScroll(e) { this.scrollTop = e.scrollTop }, 2信息栏监听下拉状态的改变而改变自己的状态 :class="scrollTop>0?'head-title-fixed':'head-title
微信小程序实现页面下拉刷新和上拉加载功能详解

本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示效果图: 实现代码: Water
微信小程序如何刷新当前界面的实现方法

在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下微信小程序刷新当前界面的几种方法. 方法一:this.onLoad() 使用方法:在操作函数中调用this.onLoad()或that.onLoad()(有时候this的作用域不够的时候需要定义that = this). 适用场景:本次操作对页面onLoad函数所携带的各种参数没有影响.这时候我们在
微信小程序首页数据初始化失败的解决方法

一. 问题描述用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产
微信小程序如何再次获取用户授权的方法

现在在做一个小程序有地图的功能,通过点击按钮打开地图.调用wx.getlocation()这个接口是需要用户的授权.如果他授权了,返回一个success当然最好啦,就什么问题都没有了.如果他点了取消,返回一个fail,我就使用预设的经纬度打开一个定位.但是如果用户点击返回以后,再次点击按钮进入地图就会没有反应(如果一开始有授权的话就可以再次重新打开地图). 有什么方法可以解决呢,或者怎样可以重新获取用户授权.毕竟叫他们删了重来的话,这样的体验好像不大好... 方法:A:单击隐藏图章wx.open
微信小程序开发常用功能点与使用方法总结

在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧 1.获取高度宽度 var windowHeight = wx.getSystemInfoSync().windowHeight var windowWidth = wx.getSystemInfoSync().windowWidth 2.动态绑定 style 样式和class class="operBtn {{select==1?'activeClass':''}}" style="displ
微信小程序全屏滚动字幕的实现方法详解

目录一.实现背景二.实现代码三.滚动速度四.后续优化实现效果一.实现背景无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu
微信小程序利用co处理异步流程的方法教程

本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍: co co是一个基于ES6 Generator特性实现的[异步流程同步化]写法的工具库. co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法: function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () {
微信小程序解决swiper不显示图片的方法

微信小程序解决swiper不显示图片的方法 1.我说的swiper不显示图片是只有一个swiper的框,但不显示设置好的图片. 第一个要确定的是图片路径设置的正不正确,确定路径没有设置错,还有一个可能的原因就是,放swiper的这个页面(也就是这个wxml文件)没有在app.json里面的pages进行注册确决的方法是: 找到项目下的app.json文件在app.json的配置文件下的pages进行页面注册,像下面图片这样小程序的文档也写了"小程序中新增/减少页面,都需要对 pages
微信小程序之滚动视图容器的实现方法

微信小程序之滚动视图容器的实现方法直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con
微信小程序实现页面跳转传值的方法

微信小程序实现页面跳转传值的方法比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js Page({ data: { id:'' }, onLoad: function (options){ var that = this; that.setD

微信小程序如何刷新当前界面的实现方法

相关推荐

随机推荐