vue项目里使用vantUI框架使用轮播组件和懒加载出现元素跳动的问题
移动端开发过程发现:1.懒加载我局部使用报错。只好全局引入,也方便以后其他页面的使用main.js// or with options (options 为可选参数,无则不传)import { Lazyload } from 'vant'; Vue.use(Lazyload, {preLoad: 0,error: 'static/img/error.jpg',loading:...
·
移动端开发过程发现:
1.懒加载我局部使用报错。只好全局引入,也方便以后其他页面的使用
main.js
// or with options (options 为可选参数,无则不传)
import { Lazyload } from 'vant';
Vue.use(Lazyload, {
preLoad: 1.3,
error: 'static/img/error.jpg',
loading: 'static/img/loading.gif',
attempt: 3
})
轮播.vue
<template>
<div class="home-swipe">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" :ref="img" width="100%"/>
</van-swipe-item>
</van-swipe>
</div>
</template>
发现元素跳动,因为为了图片宽高自适应用了100%,但是中间过渡的加载动画loading.gif 图片宽高比不同。初始化一瞬间。gif图片将元素撑大,同时img被放大。失真。
折中方案。将gif宽高比裁剪的和轮播图片宽高比等同。或用轮播图等比宽高的图片或gif代替
有更好的方案。请告知。
更多推荐
已为社区贡献22条内容
所有评论(0)