zoukankan      html  css  js  c++  java
  • vue使用swiper6分页器踩坑

    原因在于,在第六版导入只能导入swiper核心内容,而部分组件效果如分页器需要单独导入

    import Swiper, { Pagination, Navigation } from 'swiper'
    Swiper.use([Pagination, Navigation])

     自己写的有分页器和环路的轮播

    <template>
      <div class="warper">
        <swiper :options="swiperOptions">
          <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </template>
    <script>
    export default {
      name: 'Homeswiper',
      data() {
        return {
          swiperOptions: {
            loop: true,
            pagination: {
              el: '.swiper-pagination'
            }
          },
          swiperList: [
            {
              id: '0001',
              imgUrl: require('../../public/images/swiper04.jpg')
            },
            {
              id: '0002',
              imgUrl: require('../../public/images/swiper03.jpg')
            },
            {
              id: '0003',
              imgUrl: require('../../public/images/swiper02.jpg')
            },
            {
              id: '0004',
              imgUrl: require('../../public/images/swiper01.jpg')
            },
            {
              id: '0005',
              imgUrl: require('../../public/images/城.jpg')
            }
          ]
        }
      },
      methods: {}
    }
    </script>
    <style lang="stylus" scoped>
    .warper >>> .swiper-pagination-bullet-active  //样式穿透
        background :#fff !important
    .warper
        width 100%
        height:45.5vw
        .swiper-img
            width 100%
            height 3.3rem
    </style>
  • 相关阅读:
    443. String Compression
    506. Relative Ranks
    825. Friends Of Appropriate Ages
    447. Number of Boomerangs
    54. Spiral Matrix
    744. Find Smallest Letter Greater Than Target
    HDU-1565 方格取数(1)
    zoj 3672 Gao The Sequence
    ZOJ 3675 Trim the Nails
    poj -2955 Brackets
  • 原文地址:https://www.cnblogs.com/vivin-echo/p/13887105.html
Copyright © 2011-2022 走看看