uni-app的vue组件在小程序环境和浏览器环境的mounted生命周期有区别

最新推荐文章于 2024-06-04 10:31:13 发布
最新推荐文章于 2024-06-04 10:31:13 发布
阅读量1.4k 收藏
点赞数
分类专栏： uni-app vue 微信小程序填坑 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010281877/article/details/106823765
版权

一个普通的index-list组件,右侧有字母列表,点击或者滑动可以快速滚动页面,类似联系人列表的效果
当配合popup组件使用时,可以实现在页面中点击某处,然后把联系人列表弹起,在进行点击选择的功能

在浏览器中测试正常,但是在小程序环境中,点击或者滑动右侧字母索引失效

原因是因为浏览器环境中,popup控制的index-list组件,只有popup弹层被唤起时,才触发mounted事件
但是小程序环境里,刚进入页面(这时popup弹层处于隐藏状态),就已经触发了弹层中index-list的mounted事件,因为微信这时已经把整个树结构给加载出来了,但是控制着组件不显示而已,

index-list是通过查询自身高度来控制索引滑动功能的,结果mounted周期内,组件没有被实际渲染,导致查询到的高度为0, 也就导致了字母索引失效

解决问题可通过refs获取index-list实例,然后再popup被弹出时,直接调用子组件内部方法,重新计算一次高度,即可解决

余栀丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp里的mounted_uni-app 生命周期函数执行顺序
weixin_39915605的博客
01-13 2496
{{message}}点击import {mapState,mapMutations} from 'vuex';var key = 0;export default {data() {return {message: 1}},computed: {},methods: {addMsg() {this.message++}},beforeCreate() {console.group('before...
uniapp里的mounted_uni-app 开发vue和nvue时，注意事项
weixin_30316287的博客
12-31 2225
vue注意事项相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面：新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期受限：相比web平台，部分功能受限，比如 v-html 指令，具体见下。(受限部分仅在App和小程序端受限，H5版不受限)注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console...
uniapp 下拉刷新_5分钟极速入门uniapp
weixin_39626586的博客
11-29 290
之前已经简单介绍过uni-app的强大跨端能力，So，今天来带大家5分钟快速入门uni-app。本篇为基础教程，涉及如运行原理、源码解析、APP开发、uniCloud(Serverless)、NVUE，见后续更新。准备工作 需要具备的知识因为uni-app使用的DSL是Vue，所以最好先学习下Vue基础知识和Vue相关技术栈。不熟悉Vue基础知识的同学可以去官方文档学习一下：https:...
【uni-app】uniapp页面与组件生命周期介绍
最新发布
余浩的博客
06-04 1062
uniapp应用开发过程中经常会在不同的时机触发一些事件，这篇文章主要是总结一下uniapp常用的一些生命周期钩子。不同的环境运行可能有差异,下图为微信小程序执行图示。
uni-app——组件中传值使用onLoad不生效时，可用mounted
qq_43201350的博客
05-22 1581
mounted 组件挂载完时使用 mounted () { console.log('组件挂载完时触发') }
uniapp 子组件 mounted 刷新
IT_iosers的博客
08-13 3338
实现方法：通过在父组件的onShow调用子组件的方法(请求) 实现页面的刷新 父组件 html <stock :obj="obj" ref="stock" /> js onShow() { console.log('我是onshow') this.$refs.stock.getData() }, 子组件 js 请求的参数必须在data中初始化 data() { return { tableData:{}, info:{ directorEnabled: JS
uniapp里的mounted_uni-app数据请求封装
weixin_36229423的博客
02-04 4152
uni-app数据请求封装1.开发环境 uni-app2.电脑系统 windows10专业版3.在使用uni-app开发的过程中,我们会使用到数据请求,下面我来分享一下,uni-app数据请求封装,希望对你有所帮助!4.和pages同级新增一个目录,名字自己定义,在这里我的名字是 chenhttp在这个文件下面新建一个 chenhttp.js,代码如下:const BASE_URL='http:/...
uni-app + vue2.0 信息提示通用组件
03-09
- **生命周期钩子**：如`mounted`、`updated`等，控制组件的初始化、更新和销毁过程，`sun-tooltip`组件可能在这些钩子中处理显示和隐藏逻辑。 - **指令**：如`v-model`实现双向数据绑定，`v-show`或`v-if`用于...
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
09-30
在uni-app中，还可以结合uni-app的API和生命周期钩子函数来优化这个过程，例如在`mounted`钩子中初始化计算，然后在`updated`或`watch`中监听数据变化以实时更新居中位置。 此外，我们还需要关注一些细节，比如处理...
vue+uni-app轮播图.zip
03-29
本项目“vue+uni-app轮播图.zip”是一个基于Vue.js框架和uni-app平台的轮播图实现，它允许开发者轻松创建具有自定义风格和指示器样式的管理后台轮播图功能，并且能够无缝地移植到小程序环境中。 首先，Vue.js是一个...
在uni-app中使用pdf.js实现在手机上打开pdf
11-04
在uni-app中，可以使用Vue的生命周期钩子函数来处理： ```javascript , height: '100%' }"> import * as PDFJS from '@/static/uni-app-pdf-master/pdf.js' import { getURL } from '@/utils/helper' ...
uni-app 引入echarts饼图，其他图形一样，按需引入
08-31
【uni-app】是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，即可运行在小程序、H5、App等多个平台。在这个项目中，我们看到开发者正尝试将【ECharts】图表库引入到uni-app中，特别是【饼图】。ECharts...
uniapp里的mounted_uni-app自定义组件mounted无法获取节点信息
weixin_35161750的博客
12-23 1996
mounted:{uni.createSelectorQuery().in(this).select(‘.class’).boundingClientRect(rect=>{console.log(rect.width);});}上面的参数变量rect一直为null,求助答这很可能还没渲染完成，容易出现一些状况。一般情况下我都是在methods:{}里封装，再在mounted:{}里跑，比如...
uni-app中mounted 在wx小程序生命周期哪个阶段
热门推荐
黄彪博客
11-07 1万+
文章目录页面切换的生命周期案例描述结论v-if 和 v-show 触发组件的生命周期函数案例（自定义组件的）结论 页面切换的生命周期 案例描述 第一次进入A 页面 B页面执行 onload onshow mounted 使用 navigateTo 由A 进入 B 页面 A 页面执行 onHide 方法 B 页面执行 onload onshow mounted ...
uniapp里的mounted_onReady和mounted的区别??有坑??
weixin_33216916的博客
12-23 3828
建议使用 uni-app 的 onReady代替 vue 的 mounted。今天写程序时候,遇到这个问题,感觉mounted比onReady还快执行,感觉onReady是页面在渲染v-show之后执行的而mounted还没有执行完v-show就执行了..{{index}}onReady: function() {SelectorQuery = uni.createSelectorQuery()....
【uni-app】在组件mounted中使用uni.getStorage,成功的回调中设置data中的数据不成功，也不报错
羊羊羊羊羊羊羊的博客
05-25 378
console.log(this.formData) 显示的是 undefined。推测是 this指向的问题。
vue实现动态改变title
weixin_44117767的博客
09-27 404
想要实现vue动态改变页面title，需要给每个页面设置标题。并且在路由发生变化时修改页面title router - index.js const router = new Router({ mode: 'history', routes: [ { path: '/index', name: 'index', component: Index, meta:{
关于uniapp中的updated()和mounted()
weixin_45606249的博客
11-24 3996
遇到问题： 在一个表单信息编辑页面中，使用了updated()，原本的要求是，只要表单信息没有发生改变（也就是还是原来的数据），就不允许提交数据。但是遇到了一个有两页数据的表单，第一页不发生变化就无法进入到下一页。 原因分析： 由于数据在onLoad中已经加载完成了，而表单验证的代码放到了update()中，导致表单在没有发生变化时，无法执行update中的代码，从而导致无法点击下一步 解决方法： 在onLoad执行完后，把表单验证放入到mounted()中，mounted是在页面初始化.
uniapp 返回上一页再进入当前页mounted不执行
gxh0816的博客
03-27 1060
但是，首次进入的时候，函数没有被执行。我是因为需要用到onLoad去调用接口函数。所以就将我的自定义函数放到了，onLoad里面，解决了首次进入页面不执行的问题。再通过activated()解决再次进入当前页不执行的问题。最近做项目，使用的uniapp+vue2.碰到了一个问题。如a页面跳转到b页面。点击返回到A页面，再次进入到b页面。在mounted函数中的自定义函数不执行。其实是因为自己基础知识的不扎实，以及vue生命周期的了解不够。经过各种尝试以及网上各位大佬的经验。
uni-app生命周期和vue的生命周期
06-03
Uni-app 是基于 Vue.js 的跨平台开发框架，其生命周期与 Vue.js 的生命周期类似，但也有一些细微差别。 Vue.js 的生命周期分为 8 个阶段，分别是： 1. beforeCreate（创建前） 2. created（创建后） 3. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值