vue使用第三方例子 —— swiper

1、引入第三方

        1.1 轮播图 swiper           在vue中使用swiper

        纯js打造的开源 、强大的触摸滑动插件 ，面向移动端。可实现触屏焦点图、触屏Tab切换、触屏轮播图切换等效果。

       1.1.1 使用终端执行命令，进行安装，save命令进行保存到package.json中

npm install --save swiper
npm install --save [email protected] //安装指定版本

         1.1.2新建轮播图组件

<template>
    <swiper>
      <swiper-slide><img src="../assets/logo.png" alt="" /></swiper-slide>
      <swiper-slide><img src="../assets/logo.png" alt="" /></swiper-slide>
    </swiper>
  </template>
  <script>
    // Import Swiper Vue.js components
    import { Swiper, SwiperSlide } from 'swiper/vue';
  
    // Import Swiper styles
    import 'swiper/css';
  
    export default {
      components: {
        Swiper,
        SwiperSlide,
      },
      setup() {
        const onSwiper = (swiper) => {
          console.log(swiper);
        };
        const onSlideChange = () => {
          console.log('slide change');
        };
        return {
          onSwiper,
          onSlideChange,
        };
      },
    };
  </script>

        1.1.3主组件引入

<template>
  <swiper_com></swiper_com>
</template>

<script>
import swiper_com from './components/swiper_com.vue'

export default {
  name: 'App',
  components: {
    swiper_com
  },
  data(){
    return{
        title:"数据传递标题",
        age:20,
        names:["iren","maike"],
        zi_to_fu_text:""
    }
  },
  methods:{
    
  }   
}
</script>

<style scoped>

</style>

        1.1.4 添加指示器

<template>
    <swiper :modules="[modules]" :pagination="{ clickable:true}">
      <swiper-slide><img src="../assets/logo.png" alt="" /></swiper-slide>
      <swiper-slide><img src="../assets/logo.png" alt="" /></swiper-slide>
    </swiper>
  </template>
  <script>
    // Import Swiper Vue.js components
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import { Pagination }  from 'swiper';
    // Import Swiper styles
    import 'swiper/css';
    import 'swiper/css/pagination';

    export default {
      components: {
        Swiper,
        SwiperSlide,
      },
      data(){
        return{
          modules: [Pagination]
        }
      },
      setup() {
        const onSwiper = (swiper) => {
          console.log(swiper);
        };
        const onSlideChange = () => {
          console.log('slide change');
        };
        return {
          onSwiper,
          onSlideChange,
        };
      },
    };
  </script>

 效果：多了显示当前位置的指示器，高亮显示