zoukankan      html  css  js  c++  java
  • vue2 里边使用 swiper2

    找过了很多轮播图插件,我都不会用,还是回到swiper2吧。。。

    npm install swiper@2.7.6 --save-dev

    封装成一个组件

    <template>
    	<div class="lunbo" :class="name" :style="{height: h+'rem'}">
        <div class="swiper-container" v-if="type==1">
          <div class="fuck swiper-wrapper">
            <div class="swiper-slide" v-for="item in banners">
              <img :src="item">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
    
        <div class="swiper-container" v-if="type==2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in banners">
              <a :href="item.turnUrl"><img :src="item.img"></a>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
    
        <div class="swiper-container" v-if="type==3">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in banners">
              <a :href="item.turnUrl">{{item.content}}</a>
            </div>
          </div>
          <div class="swiper-pagination" v-show="false"></div>
        </div>
    	</div>
    </template>
    
    <script>
    import 'swiper/dist/idangerous.swiper.css'
    import Swiper from 'swiper/dist/idangerous.swiper.js'
    export default {
      props: ['banners','type','h','name'],
      data () {
        return {}
      },
      watch: {
      },
      mounted: function () {
        let vm = this;
        new Swiper('.'+vm.name+' .swiper-container', {
          loop: true,
          autoplay: 4000,
          updateOnImagesReady : true,
          autoplayDisableOnInteraction : false,
          pagination: '.'+vm.name+' .swiper-pagination',
        })
      }
    }
    </script>
    <style>
    /*没有分页器 加scoped不会错  */
      a{
        cursor: pointer;
      }
      .lunbo{
        margin: 0 auto;
        position: relative;
      }
      .swiper-container{
        height: 100%;
      }
      .swiper-slide{
        height: 100%;
        color: white;
      }
      .swiper-pagination {
        position: absolute;
        z-index: 20;
        bottom: 10px;
         100%;
        text-align: center;
      }
    /*分页器的样式*/
      .swiper-pagination-switch {
        display: inline-block;
         8px;
        height: 8px;
        border-radius: 8px;
        background: #6d6df8;
        margin: 0 5px;
        opacity: 0.8;
        border: 1px solid #fff;
        cursor: pointer;
      }
      .swiper-active-switch {
        background: #fff;
      }
    </style>
    

      

  • 相关阅读:
    用UltraISO制作U盘启动盘及设BIOS从U盘启动的方法
    Android 超链接 打开网址
    ActionScript常用正则表达式收集
    Android模拟器安装,使用APK文件
    正则表达式的规则
    WORD的批注
    机械迷城 迷宫全图
    mysql新建用户及授权
    验证IP是否合法
    ThinkPad水货靠谱店
  • 原文地址:https://www.cnblogs.com/caonima-666/p/6763223.html
Copyright © 2011-2022 走看看