欢迎光临lce.cc,我是一名技术出身的互联网产品经理和创业者,对产品、运营、设计、建筑、互联网、路由器、区块链等领域都有较深入的研究,对历史、哲学、心理学、政治也比较感兴趣,欢迎同样有兴趣的一起交流。我的邮箱:a#lce.cc

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

javascript lce 964℃ 0评论

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

转载请注明:长风破浪会有时,直挂云帆济沧海 » uni-app 代码中使用document.getElementById返回null的原因

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址