uniapp-微信小程序，对子组件实现onShow效果

最新推荐文章于 2024-07-14 13:35:48 发布
最新推荐文章于 2024-07-14 13:35:48 发布
阅读量4.8k 收藏 3
点赞数 3
分类专栏： uni-app 小程序 vue 文章标签： 微信小程序 uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g2526/article/details/128123094
版权
vue 同时被 3 个专栏收录
12 篇文章 1 订阅
订阅专栏
小程序
8 篇文章 1 订阅
订阅专栏
uni-app
1 篇文章 1 订阅
订阅专栏
在uni-app开发微信小程序时遇到问题，发现子组件无法使用onShow生命周期方法来请求数据。解决方案是通过父组件的onShow，在父组件中引用子组件的ref，然后在onShow中调用子组件的方法来实现数据的刷新。
摘要由CSDN通过智能技术生成

背景：使用uni-app开发一个微信小程序，使用的vue子组件，发现在子组件里面不能使用onShow生命周期，但是可以在page里面可以调用，需要在使用uni.navigateBack()返回后，该组件能请求接口数据刷新

解决：父级组件中，在子组件上添加ref，在父级onShow中通过子组件ref调用方法

父组件：

添加ref

 onShow执行子组件方法

 完工～

_Eolin
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app - 子组件中实现 onShow() 生命周期，监听页面 onShow() 实时刷新子组件内的数据（子组件中模拟页面 onShow 钩子函数，当页面显示时自动执行函数）全端兼容无 BUG
王佳斌
12-12 7792
uni-app 子组件怎么onShow，uniapp子组件中没有onshow怎么办，uniapp子组件怎么当页面显示时就执行，uniapp子组件中需要实时更新数据没有onshow这样的函数怎么办，uniapp 子组件实时刷新数据，uniapp子组件监听父组件的onshow生命周期，uniapp 子组件 mounted 刷新，uniapp子组件 onshow 不能使用，用 mounted 数值不更新怎么解决，uniapp子组件mounted第二次不执行怎么办，解决uniapp子组件mounted()第二次不执
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
王佳斌
05-24 3351
前言 在微信小程序中，用户回退页面触发更新数据的操作，一般都是在 页面 onShow() 中写上执行更新的函数即可。 但如果咱们把数据和方法都写在了自定义子组件中，那么用户回退页面时， 更新数据就成了问题，因为子组件中没有 onShow ， 执行不到更新数据操作的函数。 但是有一种方式可以解决，如下图所示： 示例代码 代码干净整洁，可直接复制或整合到您的项目中。 打开您想要更新数据的子组件， 参考以下代码完成改造， // 子组件代码 // 1. 要更新数据的组件中 // 2. 加入pageLi
如何在onshow中让子组件重新加载
温暖前端的博客
05-05 821
因此页面返回上一级页面时，必定会触发onShow函数，可以在该函数给子组件传递参数来实现子组件的重新加载。当前页面返回上一级页面时，上一级页面显示，会触发页面生命周期函数onShow。当前页面返回上一级页面时，子组件的生命周期函数mounted并不会重新加载。在开发uniapp过程中，当从当前页面返回上一级页面时，页面的子组件数据没有重新加载，导致没有展示最新数据。通过在父组件的onShow钩子函数中向子组件传递一个参数，从而触发子组件的更新.在父组件的。属性的值，从而触发子组件的更新。
uniapp onShow和onHide
最新发布
Mi_Ni_BoX的博客
07-14 216
一看就会，一练就对
微信小程序uniapp onshow函数介绍
qq_17859117的博客
03-14 1626
onShow()是小程序中的一个生命周期函数，负责页面显示时触发一些任务。
uniapp微信小程序开发踩坑日记：onShow的应用场景及用法
lbcbjtlhmjq的博客
02-17 4217
由于微信小程序是单页应用程序，所以用户在打开小程序后，只有第一次进入页面时会加载页面，之后再通过导航栏切换到相同的页面并不会导致页面重新加载但是在某些场景下，我们希望每次用户一回到某个页面，就执行相应的函数，但因为导航栏切换页面并不会导致页面重新加载，所以页面中的代码不会被再次执行如果大家和我一样使用vue3开发，可能会想到使用vue3的生命周期函数onMounted，但同样地，导航栏切换页面也不会导致dom元素重新渲染，所以onMounted并不会执行。
uniapp之 onShow、onPullDownRefresh 等不生效 使用 mounted 设置定时器
HQ\(^o^)/的博客
01-06 2567
因项目的需求，我需要 在某个页面 设置定时器，我这个定时器之所以使用 vue生命周期中的mounted以及是因为 此页面是个 子组件 暂不支持 小程序中的 onShow、 onUnload 以及 onHide 页面生命周期因此代码如下别忘了在 data 里面要定义 timer ： null} else {}, 0)console.log('刷新', +new Date());},
小程序onLoad 和 onShow
涂涂
06-21 1439
onLoad 和 onShow 是小程序页面的生命周期函数，它们在不同的时机触发，具有不同的用途和执行顺序。（2）用于页面的初始化操作，例如获取页面参数（通过 options 参数获取）和其他一次性的设置。注意：从二级页面返回该页面时，onLoad 不会再次加载，而 onShow 会重新执行。（2）页面每次出现在屏幕上都会触发，包括从下级页面返回露出当前页面。（1）onShow 在页面显示或切入前台时触发，可能会多次执行。（1）onLoad 在页面加载时触发，仅执行一次。
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp - 微信小程序实现腾讯地图位置标点展示，将指定地点进行标记选点并以一个图片图标展示出来（详细示例源码，一键复制开箱即用）
高级前端工程师
09-26 4724
uniapp腾讯地图，uniapp微信小程序端平台开发，uniapp地图指定位置标记标点，uniapp小程序平台地图如何标记位置高亮显示，uniapp小程序地图标点，uniapp微信小程序显示商家地图位置并且打上标志，uniapp小程序地图标记点覆盖物，uniapp小程序地图标点显示，uniapp小程序地图选点标记，uniapp微信小程序地图增加标记点，前端vue uniapp腾讯地图显示地图标记点，uniapp小程序高德地图的接入和自定义标点标记位置，uniapp微信小程序实现对地图多点或单点标记，uni
微信小程序代码-微信中的知乎--微信小程序demo.zip
04-22
这个压缩包中的模板代码，模仿了知乎的界面和功能，包含了一系列页面和组件，如登录、注册、问题展示、评论等，是了解微信小程序UI设计和功能实现的良好起点。 2. **源码粘贴复制**：虽然直接使用模板代码可能会...
143-微信小程序-微信.zip
06-11
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备用户，特别是微信用户。它允许开发者在微信内部构建无需下载安装即可使用的应用，提供了丰富的API接口和组件，便于快速开发出功能丰富的...
uniapp - [微信小程序] 实现点击预览各种文件 pdf文档、视频mp4、mp3音乐、图片图像、word/excel/ppt 等，uniapp小程序文件预览功能（详细示例代码，一键复制开箱即用）
高级前端工程师
11-18 5656
uniapp，uniapp微信小程序,支付宝小程序平台端，uniapp实现文件在线预览，uniapp微信小程序怎么实现预览视频mp4,mp3音乐,图片,office文档，小程序平台如何在线预览word/excel/ppt文档，uniapp实现小程序端的文件查看功能，uniapp小程序端实现pdf文件预览，uniapp纯前端预览PDF、DOC、DOCX、图片、视频，uni-app文档、图片预览查看，uniapp文档预览功能，uniapp小程序端文件预览，uniapp小程序平台纯前端解析word,pdf,xls
Uniapp中onShow()的应用
热门推荐
weixin_45606249的博客
12-01 1万+
遇到问题： 在使用一些变量进行判断时，用完一次开始下一次判断时，结果会跟前一次一样，比如门禁中第一个房子打开后，切换到另外的房子，结果返回结果跟第一个房子一样。 原因分析： 用于使用了相同的变量进行判断，然而在第一次执行完后，并没有把变量重新初始化，导致页面在第二次加载的时候，显示的结果跟第一次一样。 解决方法： 在onShow()里面，通过一些参数，判断在切换页面的时候，有没有切换房屋，如果房屋没变的话，切换页面时就不用重新初始化变量。如果房屋改变了，就把变量重新初始化。 总结： .
uniapp中父组件onshow调用触发components子组件的函数
qq_66459719的博客
04-21 2984
初级程序员的分享
uni-app vue3 setup 如何使用 onShow
BradenHan的专栏
04-16 2694
在 UniApp 中使用 Vue 3 的 setup 函数自定义底部 TabBar，你可以按照以下步骤进行操作：在src目录下创建一个名为components的文件夹，用于存放自定义组件。在components文件夹中创建一个名为TabBar.vue的文件，作为底部 TabBar 的组件。在TabBar.vue-- 自定义底部 TabBar 的内容 -->.tabbar {/* 底部 TabBar 的样式 */
uni-app:切换页面刷新，返回上一页刷新（onShow钩子函数的使用）
weixin_46001736的博客
07-24 1万+
uni-app:切换页面刷新，返回上一页刷新（onShow钩子函数的使用）
uni-app中onShow（）、onShareAppMessage（）不作用
yangyanqin2545的博客
06-09 1382
在uni-app中，拥有的onShow()、onShareAppMessage()等等函数，只会在父页面起作用，也就是被监听到，其余子页面或者弹窗页面都不会监听，所有当我们使用的时候要特别的注意。
uniapp 开发微信小程序，如何 覆盖 tabBar 的样式
05-25
在uniapp中开发微信小程序，如果想覆盖tabBar的样式，可以使用以下方法： 1. 在app.vue中设置全局的tabBar样式，使用`style`属性来设置。 2. 如果需要针对某个页面的tabBar样式进行修改，可以在对应页面的vue文件中，使用`onShow`生命周期函数来修改tabBar的样式，例如： ```javascript onShow() { uni.setTabBarStyle({ color: '#ccc', selectedColor: '#000', backgroundColor: '#fff', borderStyle: 'white' }) } ``` 3. 如果需要在不同的页面设置不同的tabBar样式，可以使用`uni.setTabBarItem()`来设置每个tabBar项的样式，例如： ```javascript onShow() { uni.setTabBarItem({ index: 0, text: '首页', iconPath: 'static/tabbar/home.png', selectedIconPath: 'static/tabbar/home-active.png' }) } ``` 以上是几种常见的覆盖tabBar样式的方法，在实际开发中可以根据需要选择合适的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值