小程序轮播图
<swiper
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}"
>
<block wx:for="{{imgList}}" wx:key="*this">
<swiper-item>
<view class="swiper-item">
<image class="img-item" src="{{item.imgUrl}}" />
</view>
</swiper-item>
</block>
<!-- 空标签 类似于vue <template></template> -->
<!-- <block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block> -->
</swiper>
<view>
</view>
swiper,.swiper-item,.img-item{
width: 750rpx;
height: 350rpx;
}
.demo-text-1{
background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F00%2F08%2F92%2F04562ba7033bf20.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644043674&t=8d2340f11d2e5b9f5bb565bbaa69e5d0) no-repeat;
background-size:100% 100%;
}
.demo-text-2{
background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091002%2F4l4ckz41fjl4l4ckz41fjl.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644043674&t=97079be1bb77471c268233e1078e4bc0) no-repeat;
background-size:100% 100%;
}
.demo-text-3{
background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F213243152Q-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644043674&t=7f0c8db5e4feb1856a02bb1bb4f7e6bf) no-repeat;
background-size:100% 100%;
}
data: {
imgList: [],
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
/* 指示点 */
indicatorDots: true,
/* 自动播放 */
autoplay: true,
/* 2秒播放一次 */
interval: 2000,
/* 播放持续时间500毫秒 */
duration: 500,
/* 从最后一页播放到第一页 */
circular:true,
}
setTimeout(()=>{
let arr = [{
imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F00%2F08%2F92%2F04562ba7033bf20.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644043674&t=8d2340f11d2e5b9f5bb565bbaa69e5d0",
},{
imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091002%2F4l4ckz41fjl4l4ckz41fjl.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644043674&t=97079be1bb77471c268233e1078e4bc0",
},{
imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F213243152Q-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644043674&t=7f0c8db5e4feb1856a02bb1bb4f7e6bf",
}]
this.setData({
imgList:arr
})
},1000)
