zoukankan      html  css  js  c++  java
  • vuerouter-10_swiper组件

    1.安装
    npm install vue-awesome-swiper --save
    2.全局配置:
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    Vue.use(VueAwesomeSwiper)
    3.组件内的局部配置:
    import 'swiper/dist/css/swiper.css'
    
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
    export default {
      components: {
        swiper,
        swiperSlide
      }
    }
    实例数据的假的或者死的:

    <template>
    <div class="shopcar">
    shopcar
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>

    </swiper>
    <Nav />
    </div>
    </template>

    <script>
    import Nav from '../Nav'
    export default {
    name: "ShopCar",
    components:{
    Nav
    },
    data() {
    return {
    swiperOption:{
    autoplay:true,
    delay:2000
    }
    }
    }
    }
    </script>

    <style lang="css" scoped>
    </style>


    4.动态
    实例:
    <template>
      <swiper :options="swiperOption">
        <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </template>
    
    <script>
      export default {
        name: 'carrousel',
        data() {
          return {
            swiperOption: {
              pagination: {
                el: '.swiper-pagination'
              }
            },
            swiperSlides: [1, 2, 3, 4, 5]
          }
        },
        mounted() {
          setInterval(() => {
            console.log('simulate async data')
            if (this.swiperSlides.length < 10) {
              this.swiperSlides.push(this.swiperSlides.length + 1)
            }
          }, 3000)
        }
      }
    </script>
     
     
  • 相关阅读:
    poj 1753 Flip Game
    SDIBT 2345 (3.2.1 Factorials 阶乘)
    HDU 1176 免费馅饼
    HDU 1058 Humble Numbers
    HDU 1003 MAXSUM(最大子序列和)
    HDU1864 最大报销额
    HDU 1114 Piggy-Bank(完全背包)
    POJ 3624 Charm Bracelet
    处理textarea里Enter(回车换行符)
    uniApp打卡日历
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11405865.html
Copyright © 2011-2022 走看看