今天来聊聊微信小程序中的轮播

前言

最近在微信小程序中使用轮播图实现了下图的效果。即轮播项两侧比中间小，轮播项变换时从小变大，并且左右留有一定间距。

img

1.间距实现

对于左右间距，我使用了原生的previous-margin和next-margin。

属性 类型 默认值 必填 说明 最低版本
previous-margin string “0px” 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0
next-margin string “0px” 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0

  • 分析

    image-20230724230548655

swiper整体宽度750px（设计稿宽度为750rpx），每个轮播项宽度670px,750-670=80，左右margin各20px,左右漏出的部分各20px。

所以应设置左右margin均为20px。

2.transform实现

轮播项变换时，添加transform:scale(n),n代表缩放的倍率。

补充：

  • css样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    .banner swiper {
        width: 100%;
        height: 310rpx;
    }
    .banner swiper-item{
       display: flex;
       justify-content: center;
    }
     .img {
      
        width: 100%;
        height: 290rpx;
        display: flex;
        justify-content: center;
    }
    .img image{  
        width: 670rpx;
        height: 290rpx;
        border-radius: 20rpx;
    }
    .banner .quiet{
        transform: scale(0.8);
        transition: all 0.5s ease-in 0s;
    }
    .banner .act { 
        transform: none;
        transition: all 0.5s ease-in 0s;
      }

  • html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <swiper indicator-dots 	indicator-color="#B2B2B2" 	indicator-active-color="#fff" previous-margin="20rpx" next-margin="20rpx" circular autoplay interval="3000" bindchange="swiperChange">
            <block wx:for="{{imgList}}" wx:key="id">
        <swiper-item>
                <view class="img {{currentIndex==index?'act':'quiet'}}">
                    <image src="{{item.imgSrc}}" mode="" />
                </view>
            </swiper-item>

    </block>
            
        </swiper>

  • js样式

1
2
3
4
5
6
7
8
9
data: {
        currentIndex:0,
    },
    swiperChange(e){
        const that=this;
        that.setData({
            currentIndex:e.detail.current
        })
    },

注意，此时previous-margin和next-margin均设置为了20rpx,但是会出现有空余空间，但是两侧不显示的情况。

img

后来注意是quiet类名中的transform属性值为 scale(0.8)，也就是左右轮播项缩小80%，也就是当轮播项正常宽度为670px时，缩小80%为536px，缩小了134px。当margin为20px时，由于左右轮播项缩小太小，导致距离过远，显示在了页面外面。

正确解决办法是减小缩放大小，设置为scale(0.93)，此时缩小了47px。再将左右margin设置尽量宽点，为40px,使得缩小后的轮播项也能出现在页面内。

  • css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    .banner swiper {
        width: 100%;
        height: 310rpx;
    }
    .banner swiper-item{
       display: flex;
       justify-content: center;
    }
     .img {
      
        width: 100%;
        height: 290rpx;
        display: flex;
        justify-content: center;
    }
    .img image{  
        width: 670rpx;
        height: 290rpx;
        border-radius: 20rpx;
    }
    .banner .quiet{
        transform: scale(0.93);
        transition: all 0.5s ease-in 0s;
    }
    .banner .act { 
        transform: none;
        transition: all 0.5s ease-in 0s;
      }

  • html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15


    ```js
    <swiper indicator-dots 	indicator-color="#B2B2B2" 	indicator-active-color="#fff" previous-margin="40rpx" next-margin="40rpx" circular autoplay interval="3000" bindchange="swiperChange">
            <block wx:for="{{imgList}}" wx:key="id">
        <swiper-item>
                <view class="img {{currentIndex==index?'act':'quiet'}}">
                    <image src="{{item.imgSrc}}" mode="" />
                </view>
            </swiper-item>

    </block>
            
        </swiper>

    总结：pervious-margin和next-margin不好用，建议使用外部插件。