1.配置stylus
npm install stylus stylus-loader --save
//webpack.base.conf文件下rules添加
rules:[
...,
{
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
} ,
...
]
2.配置swiper(之前安裝的3以上版本的,底部分頁(yè)不出來(lái),降一下版本就好了)
npm install vue-awesome-swiper --save //安裝最新版
安裝低版本
npm uninstall vue-awesome-swiper //如果安裝了最新版先卸載
npm install vue-awesome-swiper@2.6.7 --save //安裝低版本,高版本兼容性有問(wèn)題,建議安裝此版本
//main.js里引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
//組件里引入
import { swiper, swiperSlide } from 'vue-awesome-swiper'
//data里return
swiperOption: { //swiper無(wú)縫滾動(dòng)配置項(xiàng)
notNextTick: true,
direction:'vertical',
speed:1500,//滾動(dòng)速度
setWrapperSize: true,
freeMode:true,//true則是自由模式,不會(huì)自動(dòng)貼合滑動(dòng)位置
autoplay:{
delay:1,
autoplayDisableOnInteraction:false
},
loop:true,//循環(huán)
observer:true,//修改swiper自己或子元素時(shí),自動(dòng)初始化swiper
observeParents:true,//修改swiper的父元素時(shí),自動(dòng)初始化swiper
spaceBetween:4,//slide之間的距離(單位px)
slidesPerView:6 //slide可見(jiàn)數(shù)量
}