微信小程序轮播图swiper

微信小程序轮播图swiper

• index.wxml

<view class="swipe">
      <!-- index.wxml -->
      <swiper indicator-dots="{{indicatorDots}}" class="swiper" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#a5b430" indicator-active-color="#fff">
        <block wx:for="{{bannerList}}" wx:key="index">
          <swiper-item>
            <view class="swiper-item">
              <image src="{{item.url}}" mode="" />
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>

• index.js

// index.js
const app = getApp();
Page({
	data: {
		indicatorDots: true,
		vertical: false,
		autoplay: false,
		interval: 2000,
		duration: 500,
		bannerList: [],
	},

	getBanner() {
		this.bannerList = [];
		this.setData({
			bannerList: [
				{
					id: 1,
					title: "标题1",
					url: "https://i3.sinaimg.cn/IT/cr/2014/0104/1375160433.jpg",
				},
				{
					id: 2,
					title: "标题2",
					url: "https://i3.sinaimg.cn/IT/cr/2014/0104/1375160433.jpg",
				},
			],
		});
	},
	onLoad: function () {
		var that = this;
		that.getBanner(); //轮播图
	},
});

• index.wxss

.swipe {
	width: 100%;
	height: 489rpx;
	overflow: hidden;
	background: orange;
}

.swiper {
	width: 100%;
	height: 100%;
}
.swiper-item image {
	width: 100%;
	height: 489rpx;
	object-fit: cover;
}
.swiper-item {
	position: relative;
}
.swipe .wx-swiper-dots.wx-swiper-dots-horizontal {
	position: absolute;
	bottom: 40rpx;
}