Skip to content

1. swipe 组件 previous-margin 、 next-margin 问题

在微信小程序中 next-margin 支持 rpx ,但是在支付宝小程序不支持 rpx,所以我们需要

html
<swiper
	class="senior-swipe"
	:indicator-dots="swiper.indicatorDots"
	:autoplay="swiper.autoplay"
	:interval="swiper.interval"
	:duration="swiper.duration"
	:current="activeIndex"
	@change="activeIndex = $event.detail.current"
	indicator-active-color="#f54305"
	indicator-color="#d9d9d9"
	:previous-margin="swipePreviousMargin"
	:next-margin="swipePreviousMargin"
>
	<!-- slides -->
	<swiper-item
		v-for="(item,$index) in list"
		:key="item.name"
		class="senior-swipe-item"
		:class="{'is-scale' : activeIndex !== $index}"
	>
	</swiper-item>
</swiper>
js
export default {
	data() {
		return {
			swiper: {
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				// 使用 uni.upx2px转成px的值
				swipePreviousMargin: `${uni.upx2px(38)}px`,
			},
		};
	},
};