微信小程序轮播图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;
}