Question

vue awesome swiper运行的时候怎么不加载css样式

Answer 1

以下说下使用该插件的一些步骤：

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件（要注意的是该插件有依赖，安装下css-loader和less-loader，不然会出现样式问题）

[html] view plain copy

• <template>  

• <div>  

• <swiper :options="swiperOption"  ref="mySwiper">  

• <!-- 这部分放你要渲染的那些内容 -->  

• <swiper-slide v-for="item in items">  

• </swiper-slide>  

• <!-- 这是轮播的小圆点 -->  

• <div class="swiper-pagination" slot="pagination"></div>  

• </swiper>  

• </div>  

• </template>  

• <script>  

• import { swiper, swiperSlide } from 'vue-awesome-swiper'  

• export default {  

• components: {  

• swiper,  

• swiperSlide  

• },  

• data() {  

• return {  

• swiperOption: {  

• //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  

• notNextTick: true,  

• pagination: '.swiper-pagination',  

• slidesPerView: 'auto',  

• centeredSlides: true,  

• paginationClickable: true,  

• spaceBetween: 30,  

• onSlideChangeEnd: swiper => {  

• //这个位置放swiper的回调方法  

• this.page = swiper.realIndex+1;  

• this.index = swiper.realIndex;  

• }  

• }  

• }  

• },  

• //定义这个sweiper对象  

• computed: {  

• swiper() {  

• return this.$refs.mySwiper.swiper;  

• }  

• },  

• mounted () {  

• //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  

• this.swiper.slideTo(0, 0, false);  

• }  

• }  

• </script>  

• <style>  

• </style>