微信小程序·轮播图

wxml文件

<view class="page-section page-section-spacing swiper">
	<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
		<block wx:for="{{urlList}}" wx:key="*this">
			<swiper-item>
				<view class="swiper-item">
					<image class="img-item" src="{{item.imgUrl}}" />
				</view>
			</swiper-item>
		</block>

	</swiper>
</view>

js文件

Page({

    data: {
        indicatorDots: true,
        autoplay: false,
        interval: 2000,
        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
        duration: 500,
        circular: true,
        urlList: [],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        setTimeout(() => {
            let arr = [{
                imgUrl: 'https://cdn.pixabay.com/photo/2021/10/07/15/12/wine-6688901_960_720.jpg'
            }, {
                imgUrl: 'https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159_960_720.jpg'
            }, {
                imgUrl: 'https://cdn.pixabay.com/photo/2021/01/06/09/19/dresden-5893714_960_720.jpg'
            }]

            this.setData({
                urlList: arr
            })
        }, 500);
    },

})

xss文件

swiper,
.swiper-item,
.img-item {
    width: 750rpx;
    height: 350rpx;
}