基本实现功能

1,首页轮播图

2,循环轮播

3,定时轮播


老规矩先看效果图

零基础学小程序007----小程序轮播图,自动轮播,循环轮播,定时轮播_小程序


其实实现上面效果很简单,因为微信给我现成的api。

这里用到了微信的swiper控件,下面简单贴出一段代码


<!--index.wxml-->
<view>
<!--顶部轮播图 -->
<swiper indicator-dots="true" autoplay="true" interval='5000' indicator-active-color="red" circular="true">
<swiper-item>
<image class='top-img' src='/images/aaa.jpg'></image>
</swiper-item>
<swiper-item>
<image class='top-img' src='/images/bbb.jpg'></image>
</swiper-item>
<swiper-item>
<image class='top-img' src='/images/ccc.jpg'></image>
</swiper-item>
</swiper>
</view>

其实这些在微信官方文档里都有。


零基础学小程序007----小程序轮播图,自动轮播,循环轮播,定时轮播_小程序列表_02




是不是特别简单,如果你有关于微信小程序的问题。