微信小程序|图片轮播

问题描述

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

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

解决方案

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

在js:

Page({ data: { indicatorDots:true, autoplay:true, interval:5000, duration:1000, imgUrls:[ "/pages/images / 日暮.jpg", "/pages/images/海浪.jpg", "/pages/images/窗户.jpg", "/pages/images/马路.jpg" ] },

在wxml:

<view><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" style="width:100%"></image></swiper-item></block></swiper></view>

代码解释：

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

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

效果图：

图3.1图片轮播效果

结语

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

实习编辑 | 王楠岚

责编 | 赵微