uni-app 代码中使用document.getElementById返回null的原因

最近研究一个关于汉字笔画的应用。在使用uni-app开发时,希望将一处div由初始的display:none修改为display:block,于是写了如下两行:

var showarea = document.getElementById(‘showarea’);
showarea.style.display = “block”;

可是测试时浏览器控制台总是输出错误,也就是showarea没法获取到,然后也就无法设置其style.display属性了。

反复查找资料,原来问题出现在没有正确理解应用生命周期。

我把上述两行代码写在方法showHanzi()里面,而showHanzi是在onLoad()的时候调用。

而onLoad()并不代表页面就加载完成了,所以未必能获取到showarea这个div。

下面是从uni-app官网文档对生命周期状态的解释:

页面生命周期

uni-app 支持如下页面生命周期函数:

函数名 说明 平台差异说明 最低版本
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载

onLoad,顾名思义,指页面刚加载时候,未必加载完成。而onReady则是页面已经加载完成,已经准备好了。

于是,新建一个状态即onReady(),然后将showHanzi()从onLoad()移到onReady里面就可以了。

onLoad() {
this.yourname = uni.getStorageSync(‘yourname’) ? uni.getStorageSync(‘yourname’) : ‘中国人’;
},
onReady() {
this.showHanzi();
}

贴一个html版本的汉字应用:http://www.nddxs.com/


Posted

in

by

Tags:

Comments

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注