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);

　　

转载于:https://www.cnblogs.com/jsusu/p/8556895.html

相关资源：微信 新浪表情包(2018整理)