swiper 之 vue.js 中使用
作者：子長(zhǎng)
??自從摒棄了 mvc 模式娇掏，不再?gòu)氖抡故拘偷木W(wǎng)站建設(shè)蕴轨，已經(jīng)三年多沒用過swiper.js了昏滴，至此它已經(jīng)進(jìn)行了幾個(gè)大版本的更新抛虫，最新版本為 swiper6懂缕。
??今天突然需要用到滑動(dòng)效果，瞬間想起了它键俱，順便來分享一下swiper在vue中的使用
vue-awesome-swiper
??vue-awesome-swiper 是 swiper在vue框架下的一個(gè)npm包兰绣，使用方式如下：
1、下載依賴
// npm下載
npm i vue-awesome-swiper -S // i：install编振，-S: --save-dev
// cnpm下載
cnpm i vue-awesome-swiper -S
// yarn 下載
yarn add vue-awesome-swiper
2缀辩、引入
// 在入口 main.js 引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
// 頁(yè)面 引入
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
3、使用
// 頁(yè)面中注冊(cè)組件（通過main.js引入的踪央，可跳過這一步）
components: {
Swiper,
SwiperSlide
},
// 模板中調(diào)用
<div class="swiper-container">
<swiper :options="swiperOption" v-if="list.length > 0">
<swiper-slide v-for="(rowItem, index) in list" :key="index">
<div class="line-box">
{{ rowItem.name}}
</div>
</swiper-slide>
</swiper>
</div>
// data 中配置展示方式等
data () {
return {
lineSwiperOption:{ // 各類情況數(shù)據(jù)統(tǒng)計(jì)配置
loop: true, // loop模式臀玄，默認(rèn)true
initialSlide: 2, // 設(shè)定初始化時(shí)slide的索引，默認(rèn)為0
direction: 'vertical', // 輪播滑動(dòng)的方向畅蹂，默認(rèn)水平'horizontal’
autoplay: { // 自動(dòng)切換
delay: 3000, // 切換間隔
disableOnInteraction: false, // 用戶操作后健无，是否禁止autoplay，默認(rèn)true：即用戶操作后液斜，不再自動(dòng)切換
},
},
}
}
??其它配置可參考官網(wǎng)累贤，https://www.swiper.com.cn/api/index.html，
??官網(wǎng)的配置雖然全面少漆，但不夠清晰易懂臼膏，這里分享一下其它同學(xué)的的文章：https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10521462.html
