wxml <view class="shuoming"> <swiper next-margin="100rpx" previous-margin="100rpx" current="{{currentTab3}}" duration="500" snap-to-edge="true" easing-function="easeInOutCubic" bindchange="swiperTab3" class="shuomingswiper"> <block wx:for="{{gongyitu}}"> <swiper-item> <view><image src="{{item}}" class="shuomingImg {{currentTab3==index?'shuomingselected':''}}"></image></view> </swiper-item> </block> </swiper> </view> <!-- 工艺文字介绍 --> <view class="jieshao">{{jieshaolist[currentTab3]}}</view> wxss .shuoming{ margin: 150rpx auto 0; color: white; } .shuomingswiper{ width: 100%; margin: 0 auto 50rpx; height: 250rpx; } .shuomingImg{ width: 500rpx; height: 240rpx; border: 1rpx solid rgb(185,155,136); border-radius: 30rpx; transform: scale(0.9); } .shuomingselected{ transform: scale(1); }
swiper组件使用snap-to-edge=true后，首尾滑块在真机上显示不在中间，怎么修改呢？swiper组件使用snap-to-edge=true和next-margin/previous-margin，首尾滑块在真机上显示不在中间，模拟器显示正常(合我心意） 模拟器显示： [图片] [图片] 手机（安卓）显示： [图片] [图片] 首尾滑块的边没了，不在中间，好变扭，好难看。 wxml: <swiper next-margin="120rpx" previous-margin="120rpx" current="{{currentTab3}}" style="height:300rpx" duration="500" snap-to-edge="true" easing-function="easeInOutCubic" bindchange="swiperTab3"> wxss: .shuomingImg{ width: 500rpx; height: 240rpx; border: 1rpx solid rgb(185,155,136); border-radius: 30rpx; transform: scale(0.9); } .shuomingselected{ transform: scale(1); } 请问应该怎么修改，才能让这首尾滑块如在模拟器上显示的一样？
2020-09-24
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞