Swiper

提示

此组件使用了小程序提供的原生 swiper 组件，只是对其参数与样式做了一些配置。 详细配置请参阅 小程序 swiper 组件文档 (opens new window)

示例

<view class="swiper__wrap">
	<swiper 
		previous-margin="40rpx" 
		next-margin="40rpx" 
		autoplay 
		circular 
		interval="4000" 
		duration="500" 
		bindchange="swiperIdxChange"
	>
		<block wx:for="{{swiperList}}" wx:key="index">
			<swiper-item>
				<image 
					src="{{item.url}}" 
					mode="aspectFill" 
					class="slide-image {{ index == currentDot ? 'is-actived' : '' }}"
				/>
			</swiper-item>
		</block>
	</swiper>

	<view class='indicator-wrapper'>
		<text 
			wx:for="{{ swiperList }}" 
			wx:key="index" 
			class="{{index == currentDot ? 'dotfocus': ''}}"
		></text>
	</view>
</view>

Page({
	data: {
		currentDot: 0,
		swiperList: [{
				id: 0,
				url: ''
		}, {
				id: 1,
				url: '',
		}, {
				id: 2,
				url: ''
		}, {
				id: 3,
				url: ''
		}, {
				id: 4,
				url: ''
		}]
	},

	// 设置轮播图当前所在滑块的 index
	swiperIdxChange(e) {
		this.setData({
			currentDot: e.detail.current
		})
	}
})

/* 轮播图 */
.swiper__wrap {
  margin-top: 50rpx;
  position: relative;
}

.swiper__wrap swiper {
  height: 380rpx;
}

.swiper__wrap .slide-image {
  height: 100%;
  width: 100%;
  border-radius: 8rpx;
  overflow: hidden;
  transform: scaleY(.92); 
  transition: transform .5s;
}

.swiper__wrap  swiper-item {
  padding: 0 10rpx;
  box-sizing: border-box;
}

.swiper__wrap .is-actived {
  transform: scaleY(1);
  transition: transform .5s;
}

/* 轮播图进度条 */
.swiper__wrap .indicator-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 14rpx;
  height: 6rpx;
  text-align: center;
}

.swiper__wrap .indicator-wrapper text {
  display: inline-block;
  margin: 0 2px;
  width: 30rpx;
  height: 6rpx;
  background: #fff;
  vertical-align: top;
  border-radius: 2rpx;
}

.swiper__wrap .indicator-wrapper .dotfocus {
  background-color: var(--color-warning);
}