先上個效果圖:
image.png
想要有一種前后有間距的效果
思路: swiper-item不能直接調(diào)整樣式來控制間距,只能通過減少圖片盒子的大小,再水平居中來實(shí)現(xiàn)空白的地方,
先露出前后一張
<swiper
previous-margin="20"http:// 這個是重點(diǎn)
next-margin="20" //這個是重點(diǎn)
class="banner">
<block wx:for="{{propData}}" wx:key="key">
<swiper-item>
<view class="box">
<image src="{{item.images_url}}" mode="aspectFill" data-value="{{item.event_value}}" data-type="{{item.event_type}}" bindtap="banner_event" />
</view>
</swiper-item>
</block>
</swiper>
再通過調(diào)整樣式
/*輪播圖組件高度*/
.banner {
background: #fff;
margin-bottom: 20rpx;
height: 360rpx;
}
/*輪播圖片*/
.banner image {
width: 636rpx;
height: 360rpx;/*這里是重點(diǎn)*/
border-radius: 12rpx;
}
swiper-item{
text-align: center;/*這里是重點(diǎn)*/
}
/*圖片的容器*/
.box{
display: inline-block; /*這里是重點(diǎn)*/
width: 96%;/*這里是重點(diǎn)*/
height: 360rpx;
}
只用輪播組件上的設(shè)置previous-margin是無法直接控制白色間距的
給圖片加個box容器,設(shè)置寬度98%,百分比,大概是多少自己可以衡量,這樣可以控制白色間距,
再利用text-align:center;讓圖片居中,就達(dá)到了兩邊空白效果,box記得為行內(nèi)塊元素才可以center
