轮番效果在很多的网站主页或者手机应用端都能看到,在微信小程序中使用swiper组件来实现图片轮番,今天的小例子效果如下:
为了方便演示我将动画切换的间隔调整为3s,现实项目中一般为5s,具体看项目需求而定。
实现图片轮番使用swiper滑块视图容器组件,页面结构文件代码如下:
<!--mySwiper.wxml-->
<view class="container">
<swiper indicator-dots="{
{indicatorDots}}"
autoplay="{
{autoplay}}" interval="{
{interval}}" duration="{
{duration}}">
<block wx:for="{
{imgUrls}}">
<swiper-item>
<image src="{
{item}}" class="slide-image" width="355" height="150"/>