收藏
回答

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

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

回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-CJiang
    社区技术运营专员-CJiang
    09-24

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

    09-24
    有用
    回复 1
  • 聪聪
    聪聪
    10-09
    这个属性设置成true就是在circular为false的时候使得第一个滑块和最后一个滑块不使用前后边距的意思,你想要居中应该不写这个属性的直接用默认的false,另外...你这样写虽然写成true的时候是有效的,但是不规范...应该写成snap-to-edge="{{false}}"这样的给他框起来....
    


    10-09
    有用
    回复
  • 海潮中的泡沫
    海潮中的泡沫
    09-24

    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);
    }
    
    09-24
    有用
    回复
登录 后发表内容
问题标签