zoukankan      html  css  js  c++  java
  • 第四篇. vue2.x 中使用vue-awesome-swiper获取当前点击内容的索引

    1. 安装swiper 和 vue-awesome-swiper

    // 使用vue-awesome-swiper 要先引入swiper
      npm install swiper vue-awesome-swiper
    

    2.引入使用

    // 引入插件 此处的s大写 不然会报错
    import { Swiper, SwiperSlide } from "vue-awesome-swiper";
    import "swiper/swiper.scss";
    

    3. 完整代码

    <template>
      <div class="recommendPage">
        <swiper :options="swiperOption" ref="mySwiper">
          <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>I'm Slide 5</swiper-slide >
          <swiper-slide>I'm Slide 6</swiper-slide >
          <swiper-slide>I'm Slide 7</swiper-slide >
        </swiper>
      </div>
    </template>
    
    <script>
    // 引入插件 此处的S要大写 不然会报错
    import { Swiper, SwiperSlide } from "vue-awesome-swiper";
    import "swiper/swiper.scss";
    
    export default {
      components: {
        Swiper,
        SwiperSlide
      },
      data() {
        return {
          swiperOption: {
            loop: false, // 不要循环 不然多循环出的标签点击无效
            slidesPerView: 5,
          spaceBetween: 30,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false
            },
            on:{
              // 使用es6的箭头函数,使this指向vue对象
              click: ()=>{
                // 通过$refs获取对应的swiper对象
                let swiper = this.$refs.mySwiper.$swiper;
                console.log(swiper.clickedIndex) //当前点击的索引
              }
            }
          }
        };
      }
    };
    </script>
    <style scoped >
    .recommendPage .swiper-container{
      position: relative;
       100%;
      height: 200px;
      background: pink;
    }  
    .recommendPage .swiper-container .swiper-slide{
       100%;
      line-height: 200px;
      background: yellowgreen;
      color: #000;
      font-size: 16px;
      text-align: center;
    }
    </style>
    
  • 相关阅读:
    开源情报 Advise
    介绍几本搜索引擎的基础书
    Internet上的图像检索技术
    交易系统 转 武胜
    MySql数据库导出csv 武胜
    C# Process.Start()方法详解 武胜
    转 嵌入处部程序 武胜
    网际风通视接口 武胜
    C# Process运行cmd命令的异步回显 武胜
    RBreaker 武胜
  • 原文地址:https://www.cnblogs.com/Ananiah/p/14566112.html
Copyright © 2011-2022 走看看