当前位置:   article > 正文

uniapp如何解决JS更换背景闪动的问题Appa

uniapp如何解决js更换背景闪动的问题appa

更换背景图闪动主要的图片没有预先加载,如果只关心H5此方法可解决

这里是一个轮播图的更改更换背景图的,主要代码可以参考, 可以根据自己的需求来更改

currentSwiper(value) {
                // console.log(value)
                console.log(value.detail.current)
                const bgcImgspre = new Image();//new一个image实例
                bgcImgspre.src = this.getGreats[value.detail.current].bgcimg;赋值src属性,调用实例的onload方法
                bgcImgspre.onload = ()=> {//这里改用箭头函数,普通函数会改变this指向
                    this.bgimgs = bgcImgspre.src
                    this.$forceUpdate()//强制刷新
                };            
            } 

注:以上方法不适用于App端,如果你要同时解决H5和app端有两种方法可以解决闪动的问题

1:标签加上一个渲染图片的标签,隐藏它,这样图片就相当于预加载了,再调用的时候就轻而易举了

<image v-show="false" :src="itemGreat.bgcimg" mode=""></image>

2:使用雪碧图(精灵图),定位解决背景切换的问题

这种就需要UI把背景切换在一张图上面,定位的话你的很多代码要改,强烈推荐,第一种方法最简单,但是有问题,进入其他页面再回来又会有问题了,还有什么方法可留言一块讨论

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/594934
推荐阅读
相关标签
  

闽ICP备14008679号