微信小程序的轮播图大小（微信小程序开发之轮播图组件的使用）

微信小程序的轮播图大小（微信小程序开发之轮播图组件的使用）]"pages/logs/logs""pages":["pages/main/main""pages/index/index"

微信小程序中，组件是比标签更为强大的功能部件。Swiper组件可能快速实现轮播图功能，组件结构为两部分，外层为swiper，内层为swiper-item。只要在swiper开始部分增加属性，就可以实现图片轮播功能。案例效果如下：

制过步骤如下：

首先在微信开发者工具中建立一个页面，打开全局控制文件app.json，在pages中添加页面main.wxml的路径，自动会生成main的相关文件，代码如下：

{

"pages":[

"pages/main/main"

"pages/index/index"

"pages/logs/logs"

]

}

其中，第一个main表示文件夹，第二个main表示main.wxml。"pages/main/main"放在前面，表示其在微信开发者工具模拟器上首先显示。

代码输入保存后，形成的文件夹和文件如下图所示：

接着在根目录下建立images文件夹，在images文件夹下面建立post文件夹，在post文件夹中放入几张图片。效果如下图所示：

然后在main.wxml中，输入swiper组件代码，代码如下：

<view>

<swiper indicator-dots='true' indicator-color='#333' indicator-active-color='#f30' autoplay='true'>

<swiper-item>

<image src='/images/post/banner12.jpg'></image>

</swiper-item>

<swiper-item>

<image src='/images/post/banner13.jpg'></image>

</swiper-item>

<swiper-item>

<image src='/images/post/banner14.jpg'></image>

</swiper-item>

</swiper>

<text>风景展示</text>

</view>

其中，indicator-dots属性表示是否显示面板指示点；indicator-color属性表示指示点颜色；indicator-active-color属性表示当前选中的指示点颜色；autoplay属性表示是否自动切换。图片采用了绝对路径，“/”表示根目录。

与main.wxml配合的样式文件main.wxss的代码如下：

swiper{

border:solid 1px #ccc;

width:100%;

height:500rpx;

}

swiper image{

width: 100%;

height:500rpx;

}

至此，案例制作完成，可以在微信开发者工具的模拟器中看到案例效果了。