vue如何引入swiper和如何使用 以及相关的问题解决

1、github中搜索swiper 参考网址 https://github.com/surmon-china/vue-awesome-swiper

2、按照步骤进行操作 安装

npm install vue-awesome-swiper --save

3、在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

4、安装完成进行测试

<!-- The ref attr used to find the swiper instance -->
<template class="swipers">
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides 静态写法-->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <!--动态获取数据的写法 -->
     <swiper-slide v-for="item in swiperList"><img :src="item.imgUrl"></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperList:[
        {id:"01",imgUrl:"http://xxx.jpg"}, //如果是网络图片则这样引入
        {id:"02",imgUrl:require("@/assets/img/xxx.jpg")}, //如果是静态文件则这样引入 绝对路径的引入
        {id:"03",imgUrl:"http://xxx.jpg"}
       ],
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

5、如果图片加载慢的情况下会出现掉块的结果

.swipers{width:100%;height:0;padding-bottom:26.67%;} //按照宽度来计算的 375

6、应用swiper实现翻页的icon功能

布局HTML:

<div class="icons">

<div class="icons-item">

  <img src="http//.xx.jpg" />

<p>景点门票</p>

</div>

<!-- 上面代码复制10个就可以看出效果-->

<!-- 下面展示定义数组后展示到页面上的功能-->

<div class="icons-item" v-for="item in iconsList" :key="item.id">

  <img src="item.imgUrl" />

<p>{{item.title}}</p>

</div>

</div>

样式CLASS

.icon-item{width:25%;padding-bottom:25%;height:0;background:#ccc;float:left;}

.icon-item img{width:1.1rem;height:1.1rem;display:block;margin-top:1.1rem;font-size:28rem;text-align:center;color:#212121;}

JS定义数组:

iconsList:[

{id:"01",imgUrl:"",title:'景点门票'},

{id:"01",imgUrl:"",title:'景点门票'},

]

引入swiper

HTML:

<div class="icons">

  <swiper :options="swiperOption">

     <swiper-slide v-for="item in iconsList" :key='item.id'>

<div class="icons-item" v-for="page in item">

  <img src="page.imgUrl" />

<p>{{item.title}}</p>

</div>

</div>

Js

computed(){

page(){

 let pages = [];

this.iconsList.forEach((item,index)=>{

 let idx = Math.floor(index/8);

if(!pages[idex]){

 pages[idex] =[];

}else{

pages[idx].push(item)

}

return pages;

}

}

}

效果实现啦