Appearance
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`,
},
};
},
};