zoukankan      html  css  js  c++  java
  • 在vue中使用vue-awesome-swiper插件

    1.在命令行里面输入

    npm install vue-awesome-swiper@2.6.7 --save

    2.在main.js文件里面写入一下代码

    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    
    Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

    3.在组件中应用vue-awesome-swiper插件

    3.1.template标签内的内容

      <div class="swiper_wrap">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="item in swiperarr" :key="item.id">
            <img class="img_tab" :src="item.url" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>

    3.2.script标签内容

    export default {
      name:'HomeSwiper',
      data () {
        return {
          swiperOptions: {
            // 分页器设置
            pagination: '.swiper-pagination',
            // 环状轮播
            loop: true
          },
          swiperarr:[
            {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/79faa5a73731e84a7731db49d5baa91e.jpeg',id:'0'},
            {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg',id:'1'},
    
          ]
        };
      }
    }

    3.3.css部分代码

    <style lang='stylus' scoped>
    .swiper_wrap >>> .swiper-pagination-bullet-active
      background: #fff
    
    .swiper_wrap
       100%
      height: 32.5vw
      .img_tab
         100%
    </style>
  • 相关阅读:
    C#枚举(一)使用总结以及扩展类分享
    .NET使用DinkToPdf将HTML转成PDF
    .NET使用MailKit进行邮件处理
    socket+django
    mysql 修改编码格式
    django中Model表的反向查询
    浅谈 session 会话的原理
    浅谈 django Models中的跨表
    django Models 常用的字段和参数
    encoding/xml
  • 原文地址:https://www.cnblogs.com/pwindy/p/14931447.html
Copyright © 2011-2022 走看看