最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度
问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素),因此导致所有的计算都返回0
在mounted中,使用一个定时器就是好的,使用nextTick也是无效
mounted() {
this.screenX = document.body.offsetWidth;
this.getData();
// 有效
setTimeout(() => {
this.init()
}, 1000)
// 无效
this.$nextTick(() => {
this.init()
})
window.onresize = () => {
return (() => {
this.screenX = document.body.offsetWidth;
console.log('this.screenX', this.screenX);
this.init()
})()
}
},
不知道有没有更优雅的方法,能解决这个问题
// import Swiper from '@/components/common/swiper/swiper.vue'
// import { Swiper } from 'vux'
import myswiper from '@/components/common/myswiper/swiper.vue'
import imgData from '@/datas/detailImg.json'
import part1 from '@/datas/part_1.json'
import part2 from '@/datas/part_2.json'
import part3 from '@/datas/part_3.json'
import part4 from '@/datas/part_4.json'
export default {
name: "detai