48.vue-awesome-swipe使用

1.安装:npm install vue-awesome-swiper --save

2.局部引入:

import "swiper/dist/css/swiper.css"; import { swiper, swiperSlide } from "vue-awesome-swiper"; components: {   swiper,   swiperSlide }, 3.使用: <!-- 轮播图 --> <div class="swiper"> <swiper :options="swiperOption" class="swiper-container"> <!-- slides --> <swiper-slide class="swiper-item" 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> <!-- 轮播图 -->       data() {  return {    swiperOption: {        pagination: {           el: ".swiper-pagination",           clickable: true //点击小圆点 },   notNextTick: true,   loop: true, //循环   speed: 1000,   autoplay: true   // grabCursor: true //小手掌抓取滑动 },   //三张轮播,使用变量循环   swiperList: [     {        id: "001",        bg: "white",        imgUrl:"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/1550974453867424.jpg" }, {       id: "002",       bg: "red",       imgUrl:       "https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/597831022050017280.jpg" }    ]   }; }
上一篇:heapster influxdb grafana 三个插件


下一篇:配置两个Hadoop集群Kerberos认证跨域互信