vue-awesome-swiper

npm install vue-awesome-sw

 1 main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
<template> 2 <div> 3 <swiper :options="swiperOption" ref="mySwiper"> 4 <!-- 务必加上key 2.0后--> 5 <swiper-slide v-for="(item,index) in recommends" :key="index"> 6 <img :src="item.picUrl"> 7 </swiper-slide> 8 <div class="swiper-pagination" slot="pagination"></div> 9 </swiper> 10 </div> 11 </template> 12 <script> 13 import { swiper, swiperSlide } from 'vue-awesome-swiper' 14 require('swiper/dist/css/swiper.css')//必须 不然样式不能生效 15 export default { 16 data () { 17 return { 18 swiperOption: { 19 notNextTick: true, 20 autoplay: 3000, 21 pagination: '.swiper-pagination', 22 paginationClickable: true, 23 mousewheelControl: true, 24 autoplayDisableOnInteraction: false,//移动端加上这个不然不会滚动 25 loop: true,//环路 26 observeParents: true, 27 onSlideChangeEnd: swiper => { 28 this.page = swiper.realIndex + 1 29 this.index = swiper.realIndex 30 } 31 } 32 } 33 }, 34 components: { 35 swiper, 36 swiperSlide 37 }, 38 computed: { 39 swiper () { 40 return this.$refs.mySwiper.swiper 41 } 42 }, 43 mounted () { 44 this.swiper.slideTo(0, 0, false) 45 } 46 } 47 48 </script>

 

iper --save

转载于:https://www.cnblogs.com/-maomao-/p/7739677.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值