微信小程序 之 “简单自作轮播图”

微信小程序轮播图的是通过组件swiper来实现的

swiper 又叫 滑块视图容器

很多时候，我们只做页面的时候都会用到图片的轮播效果，刚开始接触的时候也不会弄，所以直接进入主题，制作一个超简单粗暴的轮播图试试。

1. 新建一个项目，在所以需要添加轮播图的界面（.wxml 文件）添加内容

2. 添加一个swiper组件，swiper组件中包含三个<swiper-item></swiper-item>标签，用<swiper-item></swiper-item>来装载轮播的图片（<image></image>标签）

.wxml 代码如下：

<swiper indicator-dots='true' autoplay='true'>
  <swiper-item>
    <image src='/images/iqiyi.png'></image>
  </swiper-item>
  <swiper-item>
    <image src='/images/vr.png'></image>
  </swiper-item>
  <swiper-item>
    <image src='/images/wx.png'></image>
  </swiper-item>
</swiper>

.wxss （样式）代码如下：

swiper{
  height: 600rpx;
  width: 100%;
}
swiper image{
  height: 600rpx;
  width: 100%;
}

 效果图如下：（因为不是动图，就用两张图片展示啦）

这样子简单的轮播图就完成啦！

解释一下代码以及参数的使用：

<swiper></swiper>	滑块视图的容器
<swiper-item></swiper-item>标签	每一个这样的标签就放置一张轮播的图片
<image></image>	放置图片的标签

swiper的参数：（更多参数详细参考：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html）

属性名	类型	默认值	备注
indicator-dots	Boolean	false	控制轮播图底部小圆点的显示与否
autoplay	Boolean	false	控制图片是否可以自动切换
interval	Number	5000	控制图片自动切换的时间间隔
circular	Boolean	false	控制图片是否采用衔接滑动（连贯切换）

indicator-color 为true的效果（底部可展示出小点点的效果）

注意：如果想要添加本地图片的就需要注意了，这里微信开发工具不支持在项目目录下直接添加文件，所以我们就选中文件目录，鼠标右击打开点打开硬盘，回到项目的本地目录下，创建一个图片目录（images）放置我们的图片即可，微信开发工具会自动识别项目下的目录和文件的了。