微信小程序：视图容器swiper实现轮播图

前言

在平时开发中，PC端要想实现轮播图效果，大都是前端使用js或者其他的js库来实现。最近在研究微信小程序，发现小程序的轮播图实现很容易。基本上只用提供数据，其余的都是通过标签的属性来指定，就能实现基本的轮播效果。

编码实战

要想开发微笑小程序，是需要在官网进行注册的，然后使用微信提供的开发工具。这里，博主就不做介绍了。

一切准备就绪，只需要创建项目，写代码就好了，这些基本的东西，如果是刚上手的读者，请自行查阅相关资料。博文主要讲视图容器"swiper"的使用。
首先将要展示的轮播图的素材，放入文件夹中，然后在js中封装成数组。
部分代码：

  data: {
    images: [
      '../../images/1.jpg',
      '../../images/2.jpg',
      '../../images/3.jpeg',
      '../../images/4.jpg'
    ]
  },

只要自己写一个数组，来装图片的地址即可。
下面就需要完成页面。

<!--  display-multiple-items="2"每次显示两张图片 -->
<swiper class="swiper" autoplay="true" interval="2500" duration="500" indicator-dots="true" indicator-active-color="#fff" circular="true">
  <block wx:for="{{images}}" wx:for-item="item" wx:for-index="index" wx:key="key">
    <swiper-item>
      <image src="{{item}}" class="img-item"></image>
    </swiper-item>
  </block>
</swiper>

基本这样，就完成了轮播图的效果图，但是为了使页面更加好看，还是要添加css,进行修饰的。

.swiper{
  height: 360rpx;
}
.img-item{
  width: 100%;
  height: 100%;
}

正如下面gif图所示，简单的代码就实现了轮播图效果。

上面标签的属性都能在“微信小程序”的开发文档中进行查看。
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

无论你在哪里，我一定拼尽全力去见你。