zoukankan      html  css  js  c++  java
  • vue2中用swiper

    一、安装swiper

    npm install --save swiper
    

     

    二、home组件 

    //home.js

    <app-banner :listImg="bannerList"></app-banner> 传值:bannerList为传入的数组 引入 import Banner from '../components/banner.vue' 模块化 components: { 'app-banner': Banner },

      

    三、子组件

    banner.js
    
    <template>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str.img_url + '?imageView2/2/w/640/h/400)' }">
            <img :src="str.img_url" alt="">
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
      </div>
    </template>
    
    <script>
      import Swiper from 'swiper';
      //import 'swiper/dist/css/swiper.min.css';
      import '../assets/css/swiper.min.css';
      export default {
        props: ['listImg'],
        mounted() {
          console.log('mounted', this)
          var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true,
            speed: 600,
            autoplay: 4000,
            observer:true,//修改swiper自己或子元素时,自动初始化swiper
            observeParents:true,//修改swiper的父元素时,自动初始化swiper
            onTouchEnd: function() {
              swiper.startAutoplay()
            }
          });
        }
      }
    </script>
    
    
    <style scoped>
      .swiper-container {
         100%;
        height: 4rem;
      }
      .swiper-wrapper {
         100%;
        height: 100%;
      }
      .swiper-slide {
        background-position: center;
        background-size: cover;
         100%;
        height: 100%;
    
      }
      .swiper-slide img{
         100%;
        height: 100%;
        max-height:4rem;
      }
      .swiper-pagination-bullet {
        0.833rem;
        height: 0.833rem;
        display: inline-block;
        background: #7c5e53;
      }
    
    </style>
    

      

    原文链接:https://segmentfault.com/a/1190000009143923

                    https://segmentfault.com/a/1190000002962202

  • 相关阅读:
    事务及存储过程
    索引细讲
    数据库练习题
    position: absolute 或 display:table 的水平垂直居中
    bootstrap table 文字超出父div范围
    css 图片不定大小不压缩、不变形的对齐
    vue3.0 + svg 图标
    vue eslint(indent) 空格缩进报错
    vue3.0 + fontAwesome 图标
    vue3.0 + ts + element-plus + i18n 中英文切换
  • 原文地址:https://www.cnblogs.com/karila/p/8137672.html
Copyright © 2011-2022 走看看