VUE学习16-swiper

swiper在项目中的封装和使用中错误解决。

封装swiper


由于项目中会用到轮播图,从提高维护性和复用性的角度考虑,尝试封装swiper。
  1. 项目中下载安装swiper。 cnpm install swiper --save
  2. 引入swiper js文件及样式表css文件。JS: import swiper from ‘swiper’; CSS:import ‘_swiper@5.3.0@swiper/css/swiper.min.css’ ;(位于import ‘_swiper@5.3.0@swiper/css/’文件夹下)
  3. 建立swiper.vue组件。项目中轮播图是在Film.vue组件中显示的,因此在views/Film文件夹下新建swiper.vue。并给在Film.vue组件使用的轮播图起名filmswiper,用于后期的控制。
  4. 初始化swiper。仍在swiper.vue组件中,通过new方法新建一个swiper对象,将其放置在mounted(){…swiper…}生命周期内。
  5. 引入swiper进行使用。在要使用轮播图swiper的Film.vue组件内,:1. 模版<template>中添加<swiper></swiper> 2. 在下方的<script></script>中使用import引入上一步定义好的swiper.vue。
  6. ⚠️注意:swiper使用时应注意其层次结构:swiper-container, swiper-wrapper, swiper-slide。
// 5.引入swiper进行使用
<template>
  <div> 
    <!-- begin of 轮播图 -->
      <swiper>
        <div class='swiper-slide' v-for='n in 10' :key='n'>
          {{n}}
        </div>
      </swiper>
    <!-- end of 轮播图 -->
    <div>film-header</div>
    <router-view></router-view>
  </div>
</template>

<script>
// 引入views/Film/Swiper.vue
import swiper from '@/views/Film/Swiper'
import '_swiper@5.3.0@swiper/css/swiper.min.css'

export default {
  components: { swiper },
  // 轮播图
  data () {
    return { slidelist: [] }
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=310100&k=6324612',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1580884372519691043891","bc":"500100"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      console.log(res.data)
      this.slidelist = res.data.data
    })
  }
}
</script>

⚠️注意:由于轮播图swiper中的内容是异步加载的,而swiper组件是在mounted()中定义的,在实际使用中很有可能swiper组件已经完成初始化后,仍然没有拿到异步加载的数据(下方的轮播点pagination同样也显示不出)。因此在<swiper>上添加类 “:key=’slidelist.length'”,这样VUE在对DOM进行diff时,就会对内容进行自动更新。最大程度缓解异步请求数据带来对不便。

// 3.4.建立swiper.vue组件并初始化
<template>
<div class="swiper-container filmswiper">
<div class="swiper-wrapper">
<!-- 数据插槽 -->
<slot></slot>
</div>
<!-- 如果需要分页器 -->
<div class='swiper-pagination'></div>
</div>
</template>

<script>
import Swiper from 'swiper'
export default {
// swiper初始化
mounted () {
let vmSwiper = new Swiper('.filmswiper', { loop: true,
pagination: {
el: '.swiper-pagination'
}
})
}
}
</script>

⚠️注意:通过new方法初始化swiper是不同通过ESLint检查的,会抛出❌error: Do not use ‘new’ for side effects (no-new)的错误。

✅解决方法:添加ESLint语言检查忽略提示(// eslint-disable no-new),或者使用Vue.use()注册进行初始化。添加语法检查忽略提示。

mounted () {
    // eslint-disable-next-line
    new Swiper('.filmswiper', { loop: true,
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }

---------------------或者--------------------

import Vue from 'vue'
mounted () {
  let vmSwiper = new Swiper('.filmswiper', { loop: true,
    pagination: {
      el: '.swiper-pagination'
    }
  })
  Vue.use(vmSwiper)
}

Swiper的使用。最后在调用swiper.vue的Film组件中,对要显示在轮播图上的内容进行添加。


TODO:本次封装仍有可改进的部分,例如使用者在<swiper>标签上就可以对autoplay,delay等轮播图属性进行修改。