横向滚动，最后一个元素margin-right失效
demo如下，开发过程中发现marign-right在手机端会自动靠右对齐，失效，导致没有间隙
1
2
3
4
5
6
| <view class="list">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| .wrap {
width: 705rpx;
display: flex;
overflow-x: scroll;
}
.item {
width: 80rpx;
height: 80rpx;
margin-right: 12rpx;
border-radius: 12rpx;
flex-shrink: 0;
background-color: pink;
}
|
解决方案：再套一层view，并设置以下css属性
1
2
3
4
5
6
7
8
| <view class="list">
<view class="wrap">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .list {
width: 705rpx;
display: flex;
overflow-x: scroll;
}
.item {
width: 80rpx;
height: 80rpx;
margin-right: 12rpx;
border-radius: 12rpx;
flex-shrink: 0;
background-color: pink;
}
.wrap {
display: flex;
overflow: visible;
}
|
css伪元素至于文字底部
- 父元素设置
transform-style:prserve-3d;
1
2
3
4
5
6
7
8
9
10
| .tab-item {
position: relative;
margin: 0 46rpx 0 24rpx;
font-weight: 500;
font-size: 28rpx;
color: #333333;
white-space: nowrap;
z-index: 1;
transform-style: prserve-3d;
}
|
- 伪元素设置
transform：translateX(-10px),(/Z方向负向旋转，元素层级下降，Z方向垂直屏幕，X方向左右，Y方向上下/)
- 伪元素设置
z-index：-1
1
2
3
4
5
6
7
8
9
10
11
12
| .tab-active::after {
width: 100%;
height: 10rpx;
content: '';
position: absolute;
left: 0;
bottom: 7rpx;
opacity: 0.96;
background-image: linear-gradient(90deg, #00C777 17%, #00c77782 99%);
box-shadow: 0 3rpx 6rpx 0 #7ff3c66b;
z-index: -1;
}
|
