uni-app中onLoad不起作用

苍髯老贼

于 2020-06-05 17:31:02 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp Vue 文章标签：小程序 vue.js 前端 js

8 篇文章

订阅专栏

8 篇文章

订阅专栏

本文记录了在使用uniapp结合ColorUI框架时遇到的首页堆叠式轮播组件失效的问题及解决方案。问题出现在pages/index/index页面，通过将初始化数据执行位置从onLoad改为mounted成功解决了轮播不生效的情况。

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

问题还原：项目使用uniapp开发，前端ui框架用的colorui，公共页面为（pages/index/index），真正的首页是在pages/index/main。

背景介绍完毕，根据设计图首页有个堆叠式轮播，引入colorui堆叠式轮播在小程序页面测试，pages/index/main轮播没有问题，pages/index/index页面轮播不生效，经过打印参数发现，页面加载完成执行初始化数据（以下代码），根本没有执行

		onLoad() {
			this.TowerSwiper('TowerList');
		},

改为mound，以下代码：

		mounted() {
			this.TowerSwiper('TowerList');
			this.towerStart = '278'
		},

轮播生效，与colorui完全一致，一路绿灯。
**在这里插入图片描述**

之后查文档，阅读@胖鹅68 （https://blog.youkuaiyun.com/hbiao68/article/details/102960770）出现此问题原因为：

onload，onShow等生命周期钩子函数只能使用在page中的vue页面，所以初始化数据没有执行。

以此文章记录，给自己一个教训，文档要仔细看啊！！！