滑塊檢視容器。

一般用於左右滑動或上下滑動，比如banner輪播圖。

注意滑動切換和滾動的區別，滑動切換是一屏一屏的切換。swiper下的每個swiper-item是一個滑動切換區域，不能停留在2個滑動區域之間。

<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="swiperChange"> <swiper-item> \t\t// 需要滑動的區域內容，可以是圖片宮格列表等等 </swiper-item> <swiper-item> \t// 需要滑動的區域內容，可以是圖片宮格列表等等 </swiper-item></swiper><view class="docts">\t<text v-for="(item,index) in 2" :key="index" :class="[ index == swiperCurrent ? 'active' : '']"></text>\t// 2 swiper-item的長度 active 選中狀態樣式</view>data(){\treturn{\t\tindicatorDots: false, //是否顯示面板指示點 autoplay: true, //是否自動切換 interval: 2000, //自動切換時間間隔 duration: 500 //滑動動畫時長 swiperCurrent: 0, //當前滑塊的索引\t}}methods:{ swiperChange(e){ \tthis.swiperCurrent = e.target.current; }}

Tips