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);
}
请问应该怎么修改,才能让这首尾滑块如在模拟器上显示的一样?
楼主可以了吗 要怎么弄
这个属性设置成true就是在circular为false的时候使得第一个滑块和最后一个滑块不使用前后边距的意思,你想要居中应该不写这个属性的直接用默认的false,另外...你这样写虽然写成true的时候是有效的,但是不规范...应该写成snap-to-edge="{{false}}"这样的给他框起来....
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); }
你好,自行检查下样式是否是没有自适应。