使用flex做水平的滚动布局的时候，会发现，设置最后一个元素的margin是无效的。在父元素添加伪类 after，添加一个需要的margin占位就好了。记得要设置高度。
jsx文件
import Nerv from 'nervjs';
import { View, Text, Image } from "@tarojs/components";
import './index.scss';
const Recommend = ({ recommendList = [] }) => {
return (
<View className={'recommend_content ' + `${recommendList.length ? 'show' : 'hidden'}`}>
{recommendList.map((item) => (
<View className='recommend_single_box' key={item.packageId}>
<View className='recommend_image'>
<Image mode='aspectFill' src={item.cardCover}></Image>
</View>
<View className='recommend_info'>
<View className='recommend_info_title'>{item.packageName}</View>
<View>
</View>
</View>
</View>
))}
</View>
)
}
export default Recommend
scss 文件
.recommend_content {
&.show {
visibility: block;
}
&.hidden {
display: none;
}
display: flex;
flex-direction: row;
align-items: center;
overflow-x: auto;
width: 100%;
height: 280px;
.recommend_single_box {
min-width: 650px;
height: 224px;
background: #F8F8F8;
border-radius: 18px;
margin: 0px 10px;
display: flex;
align-items: center;
&:first-child {
margin-left: 20px;
}
&:last-child {
margin-right: 0;
}
.recommend_image {
width: 135px;
height: 135px;
background: #D0CFCF;
border-radius: 5px;
overflow: hidden;
}
}
&::after {
content: "";
min-width: 30px;
height: 10px;
}
&::-webkit-scrollbar {
display: none;
}
}
