移动端开发过程发现:

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代替

有更好的方案。请告知。


Logo

前往低代码交流专区

更多推荐