vue中使用vue-sina-emotion
安装
# npm install vue-awesome-swiper --save # cnpm install vue-awesome-swiper --save
main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
在组建中引入
import { swiper, swiperSlide ,mdCardMedia ,mdCard} from 'vue-awesome-swiper'
components: { Badge, Popup, Toast, XDialog,XCircle,Confirm,Alert,headerBox,bannerBox,Tab ,TabItem,Scroller,Divider,Loading,swiper, swiperSlide ,mdCardMedia ,mdCard},
在data()中初始化
swiperOption: { effect: 'cube', autoplay:false, grabCursor: true, observeParents:true, hashNavigation: true, cubeEffect: { shadow: true, slideShadows: true, shadowOffset: 20, shadowScale: 0.94 }, observer:true, on:{
/**子元素切换后执行的回调**/ transitionEnd:function () { vm.tabItem = this.activeIndex // localStorage.setItem('bannerIndex',this.activeIndex) } } },
界面显示
<div> <div class="swiper-inner"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="i in 4" :key="i" > </swiper-slide> </swiper> </div> </div>
观察子元素的变化,以便于点击外部按钮直接切换子元素
computed: { swiper() { return this.$refs.mySwiper.swiper } },
点击切换子元素
this.swiper.slideTo(this.tabItem, 1000, true);