微信小程序-轮播图详解(分分钟看会)

写轮播需要用到微信小程序swiper组件

<swiper autoplay="u" indicator-dots="u" duration="200" interval="2000" indicator-color="#ccc"> // 里面用到的属性，看小程序文档

<block wx:for="{{swiperImg}}" wx:key="u" >  //循环的swiperImg在js部分以数组的形式存储，wx:key非必须写，不写会有提示

<swiper-item>  //swiper-item只能在swiper里面

<image src="{{item}}"></image>  这里图片路径{{item}} 这里的item指的就是你要循环的每一个图片，必须用item，规定

</swiper-item>

</block>

</swiper>

附：图片地址

swiperImg : [

"https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/344404.jpg?max_age=2592000",

"https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/345000.jpg?max_age=2592000",

"https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/344296.jpg?max_age=2592000",

"https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/345020.jpg?max_age=2592000",

"https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/344311.jpg?max_age=2592000"

]