最近接手一个需求,写一个h5页面,taro技术栈,语法和react很像,奈何本人对react不熟,但也只能硬接上去。页面内很多内容显示,写成不同的组建,把组建放在一个数组中,再根据字段变化调用不同的组建显示,类似:
// 存放text 组建
let showTemplate = {
text1, text2, text3
}
// 调用
<View>
{showTemplate[this.state.type]}
</view>
然后这样有个弊端,打开控制台,可以发现,这样每切换一个组建,就会加载组建里面的静态资源,如果文件太大,那么整一个h5页面的过渡效果十分不好,必须做成一个非按需加载的页面。对比vue,这不就是v-show吗,v-if不会进行vue实例的创建,而v-show则只是css的display:none而已,说干就干,代码简单改写,类似:
<View style={{display:this.state.type === 'text'?'block':'none'}}>{text}</View>
<View style={{display:this.state.type === 'text1'?'block':'none'}}>{text1}</View>
<View style={{display:this.state.type === 'text2'?'block':'none'}}>{text2}</View>
问题解决,然而又出现一个问题,由于一次加载所有静态资源,所以加载时间过长,开场动画需要一段时间才能加载完毕,打开控制台,资源主要以图片png和gif的为主,那么,只要监听到所有img标签都加载完成不就可以了?说干就干,代码简单改写,类似:
componentDidMount() {
const imgs = document.getElementsByTagName("img");
const len = 0;
for(let i = 0; i < imgs.length; i++){
imgs[i].onload = function() {
len ++;
const percess = Math.round(len * 100 / imgs.length) // 加载百分比
if (percess == 100) {
// 加载完成
}
}
}
}
问题解决(方法一定要放在节点都生成后的生命周期)