微信小程序swiper前后边距的使用
微信小程序swiper前后边距的使用小程序有一个滑动视图容器swiper提供了两个属性:(1)previous-margin:前边距,可用于露出前一项的一小部分,支持px和rpx(2)next-margin:后边距,可用于露出后一项的一小部分,支持px和rpx假如需要做一个效果,如下图所示,图片左右滑动,每次滑动都居中显示。注:1.图片的宽度不能和swiper-item的宽度一致,否...
·
微信小程序swiper前后边距的使用
小程序有一个滑动视图容器swiper提供了两个属性:
(1)previous-margin:前边距,可用于露出前一项的一小部分,支持px和rpx
(2)next-margin:后边距,可用于露出后一项的一小部分,支持px和rpx
假如需要做一个效果,如下图所示,图片左右滑动,每次滑动都居中显示。
注:1.图片的宽度不能和swiper-item的宽度一致,否则不生效
2.想要图片居中滑动,需要设置前后间距一致
1.确认想要显示的图片的宽度是610rpx,而屏幕的总宽度是750rpx
2.屏幕总宽度-图片宽度:750-610=140rpx(显示一张图剩下的屏幕宽度)
3.确定两张图片之间的间距,假设为10rpx
4.将屏幕剩余宽度均分,减去两张图之间的间距
140➗2-10=60rpx
60rpx就是前后间距
代码如下
<swiper class="swiper-container swiper2" previous-margin="60rpx" next-margin="60rpx">
<block s-for="item, index in answer" s-key="unique">
<swiper-item>
<view class="swiper-item">
<image src="{{imgs[index]['src']}}"></image>
<view class="swiper2-title">
{{item.title}}
</view>
</view>
</swiper-item>
</block>
</swiper>
.swiper-container {
height: 360rpx;
}
.swiper-item {
width: 610rpx;
font-size: 36rpx;
}
.swiper2 .swiper-item{
position: relative;
}
.swiper2 .swiper-item image{
border-radius: 16rpx;
}
.swiper-item image {
width: 100%;
height: 340rpx;
}
.swiper2-title {
position: absolute;
width: 100%;
background-image: linear-gradient(
-180deg,
rgba(0, 0, 0, 0) 3%,
rgba(0, 0, 0, 0.5) 100%
);
padding-left: 20rpx;
height: 76rpx;
line-height: 76rpx;
font-size: 32rpx;
background: rgba(51,51,51,0.5);
border-radius: 0 0 16rpx 16rpx;
bottom: 10rpx;
color: #fff;
box-sizing: border-box;
}
更多推荐
已为社区贡献1条内容
所有评论(0)