vue项目中的轮播

Question

vue webpack创建的项目

install了vue-swipe和 mint-ui 两个都试过了

但是快速滑动轮播时会出现前后两张图片会卡出来 不流畅

图片的循环出来的 换成固定数据还是不行

但是第一张和最后一张之间却是流畅的 怎么滑动都没事

Answer 1

我是直接引入的

  <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img, index) in imgs">  <img :src="img.imgUrl" :alt="index+1"> </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>

  import '../../static/swiper.min.js'
  import '../../static/swiper.min.css'
  import banner1 from '@/assets/banner-1.png'
  import banner2 from '@/assets/banner-2.png'
  import banner3 from '@/assets/banner-3.png'
  import banner4 from '@/assets/banner-4.png'
 export default {
        data (){
            return {
              imgs: [
                {imgUrl: banner1},
                {imgUrl: banner2},
                {imgUrl: banner3},
                {imgUrl: banner4}
              ]
            }
        },
mounted(){
//    轮播图
          new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            loop: true,
          });
          }
            }