今天来聊聊微信小程序中的轮播
今天来聊聊微信小程序中的轮播
nancy Jane前言
最近在微信小程序中使用轮播图实现了下图的效果。即轮播项两侧比中间小,轮播项变换时从小变大,并且左右留有一定间距。
![img](/.com//banner.png)
1.间距实现
对于左右间距,我使用了原生的previous-margin
和next-margin
。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
previous-margin | string | “0px” | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 | |
next-margin | string | “0px” | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 | |
分析
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 | data: { |
注意,此时previous-margin
和next-margin
均设置为了20rpx,但是会出现有空余空间,但是两侧不显示的情况。
![img](/.com//show.png)
后来注意是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
不好用,建议使用外部插件。