zoukankan      html  css  js  c++  java
  • vue.js中引入swiper.js

    1.下载swiper.js

      npm install vue-awesome-swiper --save

    2.在main.js中全局引入swiper.js

      import VueAwesomeSwiper from 'vue-awesome-swiper' 

      import 'swiper/dist/css/swiper.css'

      Vue.use(VueAwesomeSwiper)

    3.在模板中配置相关内容

    <template>

      <swiper :options="swiperOption">
        <swiper-slide v-for="item in imglist">
          <img :src="rootLink+ '/resources/img/' + item.imgPath"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </template>

    <script>
    import axios from 'axios'
    export default {
      name: 'carrousel',
      data() {
        return {
          rootLink: 'http://119.23.28.239:8080',
          imglist:[],
          swiperOption: {
            autoplay: 3000,  //l轮播间隔时间
            loop: true,  //是否自动轮播
            pagination : '.swiper-pagination', //轮播图中下标点显示
            paginationClickable :true   //轮播图中下标点显示
          }
         }
      },
      mounted() {
        var vm = this;
        axios.get(vm.rootLink + '/train/homePage/banner?type=上面')
        .then(function (data) {
          vm.imglist = data.data.data
        })
      }
    }
    </script>

  • 相关阅读:
    实现一个WEBIM
    拼写纠错
    UML系列图用例图
    [bzoj1670][Usaco2006 Oct]Building the Moat
    [bzoj3626][LNOI2014]LCA
    转:用JS写的一个树型结构
    一个购物车中修改商品数量的实列
    网站访问统计在Global.asax中的配置的深入讨论
    转:JavaScript中的三级联动
    转:用Sql Server存储上载图片字体
  • 原文地址:https://www.cnblogs.com/wangpeiyuan/p/8086535.html
Copyright © 2011-2022 走看看