微信小程序 图片轮播

欢迎点击「算法与编程之美」关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

图片轮播在很多APP中都很常见，那么该如何实现呢？

Swiper滑块视图容器用来在指定区域内切换内容的显示，可以用于制作图片轮播效果。

解决方案

从网上下载好图片之后，将其拖动到小程序的一个文件夹内保存。（笔者将这些图片保存在pages的子目录images下），然后再按照小程序设计流程：在js提供数据（此处即要轮播的图片），在wxml进行布局。

在js:

在wxml:

代码解释：

设置autoplay等于true时就可以自动进行轮播，设置indicatorDots等于true时代表面板显示点。还有interval,duration均为swiper的属性。

wx:for列表渲染单个组件；blockwx:for列表渲染多个组件。

效果图：

图3.1图片轮播效果

结语

在wxml文件里采用swiper滑块视图容器组件进行轮播区域的布局，在js文件提供轮播图片，是否自动播放，轮播的时长等数据，通过数据绑定的方式渲染到页面上。掌握swiper组件的属性有利于我们更好地设置轮播。

实习编辑 | 王楠岚

责 编 | 赵 微