微信小程序轮播图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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值