微信小程序从子页面返回父页面实现数据的局部刷新

最新推荐文章于 2022-01-14 15:05:29 发布
原创 最新推荐文章于 2022-01-14 15:05:29 发布 · 4.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在A页面与B页面间同步自定义字段数据并实现局部刷新的方法。通过在A页面定义changeData函数，B页面提交表单时调用此函数，触发A页面的数据更新和局部视图刷新，确保了数据的一致性和用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述
A页面有一个保存字段的对象数组items，从A页面跳转到B页面，B页面自定义字段，并添加到items中。当返回A页面时，显示items的部分能够局部刷新

items:[{name: '0', value: '姓名', checked: true, isNecessary: true,},{...},{...}],

解决过程
在A页面的js中定义一个函数：

changeData:function(){
    var that = this;
    that.onLoad();
  }

在B页面的js中，点击按钮提交表单的函数中写入下列代码：
在这里插入图片描述
不一定非要提交表单，也可以是点击按钮触发的其他函数

【微信小程序】微信小程序返回上一个页面的同时刷新数据，专业术语：小程序跨页面通信
疾术客
11-21 2516
话不多说，代码奉上！ var pages = getCurrentPages(); //获取页面栈 var prevPage = pages[pages.length - 2]; //获取当前页面的上一个页面 prevPage.onLoad(prevPage.options) //调用上一个页面的onload 来实现刷新数据 注：此方法有点，方便、快捷、无感刷新数据；弊端在于有点浪费资源...
微信小程序-页面事件
2301_79188932的博客
06-01 392
当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果，此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。（1）全局开启下拉刷新。
微信小程序----返回上一页刷新或当前页刷新
热门推荐
止于至善
04-05 19万+
HTML实现当前页面刷新 首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢？ 1，reload()方法刷新当前页面； 2，replace() 方法刷新当前页面； 3，页面自动刷新当前页面； 三种实现js 刷新当前页面的方法用法 微信小程序—-返回上一页刷新或当前页刷新 1，在实现效果之前，需要知道微信小程序的页面生命周期，不是很清楚的可以看微信小程序
小程序开发[从详情返回列表局部刷新数据]
App Store.公众号.小程序:分享录
08-18 795
本文是小程序调优解决方案之从详情返回列表局部刷新数据。本文巧妙利用setStorage来传参数，回显的时候用getStorage获取数据，从而达到局部刷新列表数据的效果，最后用removeStorage释放并回收资源。 详情访问：https://www.xubingtao.cn/2020/08/18/mp_dev_local_refresh ...
2022-01-13 工作记录--Wechat applet-子页面返回父页面，刷新父页面数据
weixin_48850734的博客
01-14 645
Wechat applet-子页面返回父页面，刷新父页面数据
微信小程序列表局部(单条)刷新
小白成神路
05-18 4224
问题背景 在小程序列表中，对某一条点赞，成功后setData修改点赞数量，接口请求成功回调如下 success: res => { this.data.posters[index].like_sum = parseInt(this.data.posters[index].like_sum) + 1; this.setData({ poster: this.data.posters }) }, 此处的index是在wxml中for循环的index偏移下标，绑定到节点数据： dat
子页面返回父页面时候做的判断
weixin_30425949的博客
04-14 137
if(!!window.parent.opener.window.jxxcyjcx) { window.parent.opener.window.jxxcyjcx(cydh); } 若父页面有jxxcyjcx（）方法时候才会执行里面的方法，就是判断一下 转载于:https://www.cnblogs.com/zhuyeshen/p/10706187.htm...
微信小程序局部刷新触发整页刷新效果的实现代码
10-17
总的来说，微信小程序局部刷新触发整页刷新效果的实现需要开发者对小程序的数据绑定、页面渲染以及CSS样式控制有深入的理解和掌握。在实际开发中，合理使用setData方法、监听页面的生命周期和事件、以及灵活运用条件...
微信小程序利用setData对列表进行局部刷新超详细
03-29
之前写的一篇利用setData进行局部渲染的文章，有些朋友可能看的不是很明白，那篇文章写的可能也有一些问题，今天我就把那篇文章重新做一个详细解说，希望大家都能看的明白。  看这篇文章的小伙伴肯定是遇到了这些...
小程序实现返回上个页面并刷新上个页面的数据或更新组件数据。
KL4099的博客
11-22 2032
授权登录页面B返回首页A更新首页A中id为recruitment的组件数据 letpages=getCurrentPages()//获取页面栈 let currentPage=pages[0];//获取首页（即第一个页面）的页面栈 letcurrComponent=currentPage.selectComponent('#recruitment')//拿到首页中id为recruitment的组件 currComponent.reset()//重置更新组件数据 wx.navigat...
Jquery子页面获取父页面元素，子页面向父页面添加元素
05-09
父页面动态的获取子页面的元素，以及弹出子页面的时候获取父页面的元素；
微信小程序对于数据的局部更新
Rob_gao的博客
10-19 7348
Data中的一个数组 this.setData({ nameArray: [{ id: 1, name: 'rob', sex: 'man', age: 16, grade: '高一' }, { id: 2, name: 'mike', sex: 'man', age: 17, grade: '高二' }, { id: 3, name: 'jodie', sex: 'women', age: 18...
微信小程序中使用setData({})达到删除、编辑操作后页面数据局部刷新的效果
qq_41930094的博客
05-20 4780
前言： 当一个页面数据列表过多时，刷新数据如果采用全局加载（整页数据重新渲染）方式则影响用户的体验，这时候需要优化成局部加载（部分修改数据重新渲染）。 场景：最近用户提出小程序的列表数据翻页后数据刷新不能回到之前修改的位置，简单讲：就是用户想进行修改、删除操作后，当前页面不需要重新数据渲染，， 如图：列表数据是拥有删除和编辑功能（点击分类名称，出现分类选则弹框） 1.删除操作 *通过html页面获取删除数据的下标后，等js中调取删除api成功之后，使用数组splice方法删除该下标的元素，最后使用 th
微信小程序 返回上一页面时实现上一页面数据刷新（页面栈）
前端很杂，故名前端杂货铺 —— coderkey
12-08 2015
问题： 从A页面跳转到b页面后，再从b页面返回到a页面，同时刷新a页面的数据 解决方案： 页面B： var pages = getCurrentPages(); //当前页面栈 if (pages.length > 1) { var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象（a页面） var currPage = pages[pages.length - 1]; // 当前页面，若不对当前页面进行操作，可省去（b页面） befo
微信小程序局部刷新触发整页刷新效果
weixin_39168678的博客
11-21 2289
效果图 如上图所示，头部的选项栏时固定的（fixed），下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果，如果去掉fixed当我们上拉的时候，选项栏又无法固定，所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onPageScroll(e) { this.scrollTop = e.scrollTop }, 2信息栏监听下拉状态的改变而改...
微信小程序操作当前页面后返回上一级并自动刷新上一级页面数据
青衫折扇的博客
04-14 5946
微信小程序的页面是由onLoad（页面加载）、onReady（页面初次渲染完成）、onShow（页面显示）、onHide（页面隐藏）、onUnload（页面卸载）五个周期构成； 实现返回上一页的时候其实是直接将隐藏的页面再显示出来，所以不存在页面的再次加载， A页面 ——>B页面——>返回A页面（更新A页面数据） 解释：在A跳转B的过程实现是A页面隐藏，B页面初始化渲染； 返回...
小程序操作当前页面后返回上一级并自动刷新上一级页面数据
qq_43561241的博客
07-04 1万+
微信小程序的页面是由onLoad（页面加载）、onReady（页面初次渲染完成）、onShow（页面显示）、onHide（页面隐藏）、onUnload（页面卸载）五个周期构成； 实现返回上一页的时候其实是直接将隐藏的页面再显示出来，所以不存在页面的再次加载， A页面 ——>B页面——>返回A页面（更新A页面数据） 解释：在A跳转B的过程实现是A页面隐藏，B页面初始化渲染； 返回...
小程序数据回传,刷新父界面数据
requestWindowFeature的博客
11-21 1167
场景： 当遇到子界面修改数据，返回父界面需要刷新父界面数据时，我们这样解决： 方法1： 由于打开一个Page，onLoad方法只会执行一次，像是网络请求的方法可以放在onShow中（但是会执行两次，父界面打开时执行，子界面返回到父界面时再回刷新一次，比较low 浪费流量） 方法2 ： 在子界面中 调用： var t = getCurrentPages()[getCurrentPages...
微信小程序不刷新页面更新数据
最新发布
03-27
<think>好的，用户的问题是关于在微信小程序中如何不刷新整个页面就能更新数据和动态渲染。我需要根据提供的引用内容来组织回答，确保符合格式要求，比如使用中文、正确的LaTeX格式，并且生成相关问题。 首先，用户提到的引用1、2、3都涉及动态数据绑定和渲染，特别是使用this.setData()方法。所以，我应该先介绍数据绑定的基本原理，然后详细说明如何通过setData实现局部更新，避免页面重新加载。接着，可以提到列表渲染中的key属性优化，这有助于提高渲染效率。然后，结合代码示例，比如一个简单的计数器和一个列表更新，来具体展示实现方法。最后，注意事项部分需要强调数据量控制和合并操作，避免性能问题。 接下来要检查是否满足所有系统级指令，比如行内数学表达式是否正确使用$...$，独立公式是否用$$...$$。但在这个问题中可能用不到数学公式，所以可能不需要处理这部分。然后确保回答结构清晰，分步骤说明，并生成相关问题。 需要确保每个步骤都有对应的引用标注，例如在讲解setData时引用[^2]，在动态数据绑定时引用[^3]。代码示例需要正确使用代码块格式，并且语言标记为python？不过微信小程序通常用JavaScript或WXML，可能需要调整。但根据示例中的代码，用户可能希望用Python风格的代码块，但实际微信小程序使用的是JavaScript，所以可能需要注明或者调整。不过原引用中的代码示例可能也是JavaScript，需要确认。不过用户提供的引用中的示例可能没有代码，所以需要根据常规的小程序代码来写，比如使用this.setData的例子。 最后生成的相关问题需要围绕数据绑定、性能优化、与其他框架对比，以及常见问题处理这几个方面。 现在开始组织回答： 1. 数据绑定机制：解释动态数据绑定的概念，引用。 2. 局部更新方法：使用this.setData()，引用[^2]。 3. 列表渲染优化：使用wx:key，引用。 4. 代码示例：展示如何更新数据和列表。 5. 注意事项：数据量和合并操作的重要性，引用[^2]。 相关问题部分需要生成四个问题，涵盖原理、优化、对比和常见问题。</think>在微信小程序中实现不刷新页面的数据更新，主要依赖**动态数据绑定与渲染机制**，通过以下步骤实现： --- ### 一、数据绑定机制 微信小程序通过`数据模型`与`视图层`的实时关联实现动态更新。当数据变化时，框架会自动更新对应UI元素[^3]。例如，若数据模型中有变量`count`： ```javascript Page({ data: { count: 0 } }) ``` 在视图中绑定该数据： ```html <view>{{count}}</view> ``` 修改`count`的值时，视图会自动更新，无需刷新页面。 --- ### 二、局部更新方法：`this.setData()` 通过调用`this.setData()`方法更新数据，框架仅重新渲染变化的部分。例如实现计数器： ```javascript Page({ data: { count: 0 }, increment() { this.setData({ count: this.data.count + 1 }); } }) ``` 点击按钮触发`increment`时，仅更新`count`对应的视图区域。 --- ### 三、列表渲染优化：`wx:key` 动态渲染列表时，使用`wx:key`标识唯一性以提高性能： ```html <view wx:for="{{list}}" wx:key="id">{{item.name}}</view> ``` 更新列表时，仅重渲染变化的项： ```javascript this.setData({ 'list[2].name': '新值' }); ``` --- ### 四、完整代码示例 **WXML**： ```html <view>{{message}}</view> <button bindtap="changeMessage">更新消息</button> ``` **JS**： ```javascript Page({ data: { message: "初始内容" }, changeMessage() { this.setData({ message: "更新后的内容" }); } }) ``` 点击按钮后，仅`message`对应的视图部分更新。 --- ### 五、注意事项 1. **数据量控制**：避免一次性更新过多数据，防止性能下降。 2. **合并操作**：多次调用`setData`时合并为一次，减少通信开销。 ```javascript // 合并更新 this.setData({ a: 1, b: 2 }); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值