微信小程序|图片轮播
问题描述
图片轮播在很多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组件的属性有利于我们更好地设置轮播。
实习编辑 | 王楠岚
责 编 | 赵 微
腾讯云开发者
