一、視圖容器（Swiper）

1、swiper：滑塊視圖容器

? ??微信官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

? ??

? ??

二、swiper應(yīng)用

1、頁(yè)面邏輯（index.js）

Page({data: {imgUrls: [{link: '/pages/index/index',url: '/images/001.jpg'}, {link: '/pages/list/list',url: '/images/002.jpg'}, {link: '/pages/list/list',url: '/images/003.jpg'}],indicatorDots: true, //小點(diǎn)indicatorColor: "white",//指示點(diǎn)顏色activeColor: "coral",//當(dāng)前選中的指示點(diǎn)顏色autoplay: false, //是否自動(dòng)輪播interval: 3000, //間隔時(shí)間duration: 3000, //滑動(dòng)時(shí)間}

? ??其中 imgUrls 是我們輪播圖中將要用到的 圖片地址和 跳轉(zhuǎn)鏈接

? ??indicatgorDots 是否出現(xiàn)焦點(diǎn)

? ??autoplay 是否自動(dòng)播放

? ??interval 自動(dòng)播放間隔時(shí)間

? ??duration 滑動(dòng)動(dòng)畫(huà)時(shí)間

2、頁(yè)面結(jié)構(gòu)（index.wxml）

<!--輪播圖--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}"
indicator-active-color="{{activeColor}}"><block wx:for="{{imgUrls}}"><swiper-item><navigator url="{{item.link}}" hover-class="navigator-hover"><image src="{{item.url}}" class="slide-image" width="355" height="200" /></navigator></swiper-item></block> </swiper>

? ??注意： swiper 千萬(wàn)不要在外面? 加上任何標(biāo)簽 例如 <view> 之類的 ，如果加了可能會(huì)導(dǎo)致輪播圖出不來(lái)?

3、頁(yè)面樣式(index.wxss)

/*輪播圖*/ .slide-image {width: 100%; }

三、小程序效果圖

? ??趕快動(dòng)手實(shí)踐就可以看到如圖所示效果圖：

? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/1312mn/p/9561257.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序之视图容器（swiper）组件创建轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。