小程序 swiper 前后边距的使用

最新推荐文章于 2024-08-21 17:47:57 发布

Frankeen

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量5.3k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/kai_1215/article/details/87352189

版权

小程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

小程序swiper 其中提供了两个属性，previous-margin和next-margin；

previous-margin：前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值；

next-margin：后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

假设设置一个view的尺寸为宽为640rpx,高为360rpx，前边距为25rpx,后边距为25rpx,如果此时直接为previous-margin和 next-margin设置为25rpx，看到效果可能不是想要的那样，可能如下

    <swiper previous-margin="25rpx" next-margin="25rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
        <block wx:for="{{list}}" wx:for-item="item" wx:key="{{item.imgUrl+index}}">
            <swiper-item class='swiper_item'>
                    <image src='{{item.imgUrl}}' class="swiper_imge" mode='scaleToFill' data-item="{{item}}" bindtap="swiperItemOnClick"></image>
            </swiper-item>
        </block>
    </swiper>

此时我们不应该直接为previous-margin和 next-margin设置为25rpx，他们值应该重新算，现在我想要达到我上面想要的效果，应该怎么算呢，算法如下：

根据屏幕尺寸宽度为750rpx来计算；
确定想要图片露出的尺寸，假设为25rpx，图片显示宽度为640rpx;
屏幕宽度-图片的宽度，得到两边的边距和；
750-640=110
将边距拆成两部分，得到一边的边距，用边距减去露出的尺寸，得到两张图片之间的边距；由于swiper-item的宽度不能改成图片的大小，只能将盒子图片居中了，盒子内边距作为空白间隙；
110/2-25=30
图片间距拆成两部分，分别为图片的外边距
30/2=15
露出的尺寸加上外边距就等于前后边距的值
　25+15=40
所以最后我们应该给previous-margin和 next-margin设置为40rpx；同时注意设置图片宽度640rpx;效果就达到了，代码如下

<view class="container">
    <swiper previous-margin="40rpx" next-margin="40rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
        <block wx:for="{{list}}" wx:for-item="item" wx:key="{{item.imgUrl+index}}">
            <swiper-item class='swiper_item'>
                    <image src='{{item.imgUrl}}' class="swiper_imge" mode='scaleToFill' data-item="{{item}}" bindtap="swiperItemOnClick"></image>
            </swiper-item>
        </block>
    </swiper>
</view>

.container{
  position: relative;
}

.swiper {
  width: 100%;
  height: 360rpx;
  margin: 30rpx 0rpx;
  background-color: #FFFFFF;
}

.swiper_item {
  height: 360rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper_imge {
  width: 640rpx;
  height: 360rpx;
  background-color: #FFFFFF;
  border-radius:20px;
}