uniapp预览图片后会触发页面的onShow生命周期，解决这个问题

最新推荐文章于 2024-04-16 22:17:02 发布
最新推荐文章于 2024-04-16 22:17:02 发布
阅读量2.3k 收藏
点赞数
分类专栏： 笔记 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42444651/article/details/124609107
版权

我遇到的问题是使用uni.previewImage(）API预览图片后，关闭图片会触发onShow生命周期，而我的onShow生命周期是有函数调用的，如果预览图片后直接调用onShow生命周期，会出现逻辑错误。

可以在data中设置一个变量showOrNot = true
在调用预览图片的函数中把该变量设置成false，
而在onShow生命周期中用一下判断
if(this.showOrNot){
自己要调用的函数
}

java奋斗生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【uni】预览previewImage，上传图片触发onShow生命周期，解决方法（ispreviewImage）
AAAXiaoApple的博客
03-23 2890
目前项目适用的逻辑是，提交 form表单 触发 onshow ，，编辑保存表单 不触发 onshow，
previewImage预览图片 会触发onShow问题
拿回忆下酒
07-17 2482
我们在开发小程序的过程中，onShow和previewImage是很常见的操作 onShow : 每次进入页面都执行的周期函数 previewImage ： 预览图片时的操作 但是previewImage预览图片时，我们发现会每次都执行onShow，这肯定不是我们需要的，所以我定义了refreshAsync用来判断是否要真的执行 onShow 定义refreshAsync.js //refreshAsync.js import {mapGetters,mapActions} from 'vuex' expo
uni-app vue3 setup 如何使用 onShow
最新发布
BradenHan的专栏
04-16 1621
在 UniApp 中使用 Vue 3 的 setup 函数自定义底部 TabBar，你可以按照以下步骤进行操作：在src目录下创建一个名为components的文件夹，用于存放自定义组件。在components文件夹中创建一个名为TabBar.vue的文件，作为底部 TabBar 的组件。在TabBar.vue-- 自定义底部 TabBar 的内容 -->.tabbar {/* 底部 TabBar 的样式 */
uniapp的onload()和onshow（）的区别
qq_44980680的博客
12-30 8190
2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。
UniApp `onShow` 和 `onLoad` 区别以及执行顺序
我们好像在哪见过
07-01 6883
生命周期钩子函数在页面加载时触发，表示页面的初始化过程。是在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时。生命周期钩子函数在页面展示时触发，表示页面被显示到前台。在该函数中，可以处理页面显示相关的逻辑，例如刷新数据、更新UI等。函数可能会多次执行，因为页面在切换后台和前台之间多次切换时都会触发。当页面再次被切换到后台，然后再次切换到前台时，会再次触发。是在页面加载时触发，用于页面的初始化操作，只执行一次。页面初始化完成后，页面会被展示到前台，此时会触发。
如何在uniapp的onshow 接受参数？
Allen-Ye博客
06-26 3059
如何在uniapp的onshow 接受参数？
uniapp实现onShow/任何位置获取页面传递参数的方法
anwenagululu的博客
12-01 1356
的实例，以数组形式按栈的顺序给出，数组中的元素为页面实例，第一个元素为首页，最后一个元素为当前页面。uniapp实现onShow/任何位置获取页面传递参数的方法。
uniapp开发页面onShow()里面赋值不生效
m0_59722227的博客
11-23 1923
最近在开发一个小程序+h5项目的时候遇到了一个问题,就是onshow()钩子函数中赋值的时候在小程序环境生效,但在h5的时候没生效,之前一直觉得可能是页面缓存问题,但查看文档和百度之后是onShow()这个函数本身就有问题.上辈子杀人放火,这辈子写前端适配...
微信小程序（五）页面生命周期详细介绍
09-01
在微信小程序中，每个页面都有其特定的生命周期，开发者需要在对应的生命周期函数中编写相应的业务逻辑。 1. **onLoad()**: 页面加载时触发，一般用于初始化数据。在这个阶段，可以通过调用`wx.request`或`app....
微信小程序页面生命周期详解
08-28
onShow 函数是微信小程序页面生命周期的第三个阶段，在页面显示时触发。这个函数通常用于页面的更新、刷新页面的数据等。在 onShow 函数中，可以使用 this.setData() 方法来更新页面的数据。 4. onHide 函数：监听...
微信小程序 生命周期和页面的生命周期详细介绍
08-31
例如，当从一个页面跳转到另一个页面时，源页面的`onHide`和目标页面的`onShow`会依次调用。同时，如果在整个过程中，小程序始终处于前台，那么`App.js`中的`onShow`也会相应触发。 理解并熟练掌握这些生命周期函数...
详解小程序中h5页面onShow实现及跨页面通信方案
10-16
主要介绍了小程序中h5页面onShow实现及跨页面通信方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序开发详解《四》页面生命周期和参数传递
03-29
点击“编译”后，运行这个小程序：日志如图2所示：初始页面index.js启动会从app,js中的生命周期方法调用开始：onLaunch---onShow，然后开始调用index.js页面中的生命周期方法：onLoad---onShow---onReady，当点击...
uni.chooseimage会返回顶层，或者刷新页面，或者App的onShow被调用问题
人生短短数十载，要学会走捷径
12-03 2264
因为你选取图片时，完成或者取消，都会调用App的onshow 所以你在onshow里面做了跳转操作的，应该就是这个问题了， 不要在onshow里面做跳转，尽量在onLaunch里面做 有帮助就给我评论一波，谢谢
uni-app小程序onShow执行两次；微信小程序onShow重复执行原因；导航栏tabBar页的onLoad函数不执行；App.vue页的onShow执行原因；onShow莫名其妙执行
i_am_a_div的博客
10-11 7452
1.从任何页面返回到tabBar页面，都不会触发tabBar页面的onLoad函数； 2.只有三种情况会触发导航栏tabBar页的onLoad函数，分别是： –2.1：首次进入到导航栏tabBar页面； –2.2：从微信分享进入的导航栏tabBar页面； –2.3：使用了uni.reLaunch后，点击返回首页按钮，到的首页，页会触发首页的onLoad函数 ...
uni-app - 子组件中实现 onShow() 生命周期，监听页面 onShow() 实时刷新子组件内的数据（子组件中模拟页面 onShow 钩子函数，当页面显示时自动执行函数）全端兼容无 BUG
王佳斌
12-12 7234
uni-app 子组件怎么onShow，uniapp子组件中没有onshow怎么办，uniapp子组件怎么当页面显示时就执行，uniapp子组件中需要实时更新数据没有onshow这样的函数怎么办，uniapp 子组件实时刷新数据，uniapp子组件监听父组件的onshow生命周期，uniapp 子组件 mounted 刷新，uniapp子组件 onshow 不能使用，用 mounted 数值不更新怎么解决，uniapp子组件mounted第二次不执行怎么办，解决uniapp子组件mounted()第二次不执
uniapp实现onShow获取页面传递参数方法
qq_19820589的博客
06-04 835
【代码】uniapp实现onShow获取页面传递参数方法。
js实现uni中生命周期onShow的功能
Sissi的个人笔记
04-02 1831
关于onShow uni官方文档中onShow的说明： onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。 其他 H5新增了一个事件visibilitychange(能见度更改)用来实现和onShow一样的功能。 使用方法： document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); //页面显示时document.vis
微信小程序 wx.previewImage 预览分享图片结束之后 执行事件
LZhizi的博客
03-23 1843
预览结束之后 会执行一遍 onshow 所以可以把执行事件写在onshow里面 /** * 生命周期函数--监听页面显示 */ onShow: function () { this.setData({ personCanves: false }) }, ...
解决uniapp切换菜单栏时会触发onshow的问题
05-31
如果你不想在 uni-app 切换菜单栏时触发 onShow 函数，可以在 App.vue 中实现一个全局的状态管理，用一个变量来记录当前页面是否需要触发 onShow 函数。具体实现方式如下： 1. 在 App.vue 中定义一个全局变量 `needShow`，用来标识当前页面是否需要触发 onShow 函数。 ```html <template> <div> <!-- 页面内容 --> <router-view :needShow="needShow"></router-view> </div> </template> <script> export default { data() { return { needShow: true }; }, methods: { // 切换菜单栏时，设置 needShow 为 false，不触发 onShow 函数 switchTab(e) { const index = e.index; if (index === 0) { this.needShow = false; } else { this.needShow = true; } } } }; </script> ``` 2. 在页面组件中，利用 props 接收 App.vue 中传递的 `needShow` 变量，并在 onShow 函数中根据 `needShow` 变量的值来判断是否需要执行相关操作。 ```html <template> <div> <!-- 页面内容 --> </div> </template> <script> export default { props: { needShow: { type: Boolean, default: true } }, onShow() { if (this.needShow) { // 执行需要的操作 // TODO } // 重置 needShow 为 true，确保下次切换菜单栏时能够触发 onShow 函数 this.$emit("update:needShow", true); } }; </script> ``` 在这个例子中，我们在 App.vue 中定义了一个全局变量 `needShow`，并在切换菜单栏时根据当前选中的菜单项来设置 `needShow` 的值。在页面组件中，我们利用 props 接收 App.vue 中传递的 `needShow` 变量，并在 onShow 函数中根据 `needShow` 变量的值来判断是否需要执行相关操作。需要注意的是，我们在页面组件中通过 `$emit` 方法来更新 `needShow` 变量的值，确保下次切换菜单栏时能够触发 onShow 函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值