swiper组件使用snap-to-edge=true后，首尾滑块在真机上显示不在中间，怎么修改呢？ - WXOPEN Club

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);
}

请问应该怎么修改，才能让这首尾滑块如在模拟器上显示的一样？

caoguiying 1楼•4 年前

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);
}

na01 2楼•4 年前

你好，自行检查下样式是否是没有自适应。