最近研究一个关于汉字笔画的应用。在使用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/
发表回复