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