1 問(wèn)題描述
在用vue做頁(yè)面設計時(shí)，首頁(yè)經(jīng)常會(huì )用到圖片輪播效果，在之前講slider滑塊，那么如何用swiper滑塊實(shí)現圖片輪播呢？
2 算法描述
滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì )導致未定義的行為。因此在用image時(shí)，要先寫(xiě)swiper組件的swiper-item組件，才能插入圖片。
| <view> <swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration"> <swiper-item> <view> <image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg" mode=""></image> </view> </swiper-item> <swiper-item> <view> <image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg" mode=""></image> </view> </swiper-item> <swiper-item> <view> <image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg" mode=""></image> </view> </swiper-item> </swiper> </view> |
再在scrip中寫(xiě)入方法，實(shí)現輪播。indicatorDots是否面板顯示指示點(diǎn)autoplay是否自動(dòng)播放，默認值是false，對切換間隔時(shí)長(cháng)的設置interval，duration滑動(dòng)動(dòng)畫(huà)時(shí)長(cháng)。
| <script> export default { data() { return { indicatorDots: true, autoplay:true, interval: 3000, duration: 500, indicatorColor:"#292b40", } }, } </script> |
最后可以對圖片的樣式做一些設置，使其體驗效果較好。
| <style lang="scss"> reg-img { width: 720rpx; height: 316rpx; margin-right:10rpx; margin-left: 10rpx; border-radius: 20rpx; } </style> |
效果圖
3問(wèn)題總結
學(xué)習了swiper滑塊后，它是滑塊試圖容器，不止可以實(shí)現圖片輪播效果，它還有很多的屬性，也可以繼續去探索。
稿件來(lái)源：深度學(xué)習與文旅應用實(shí)驗室（DLETA）
聯(lián)系客服
