小程序横向滑动

最新推荐文章于 2024-08-23 10:43:07 发布

原创最新推荐文章于 2024-08-23 10:43:07 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序横向滑动

小程序专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了用于分类滑动的样式设计，包括.scroll-box、.list-area等关键CSS类的使用方法，以及如何通过调整宽度、高度和padding等属性实现平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{{item.name}} /* 分类滑动 */

.scroll-box {
width: 100%;
height: 40rpx;
overflow: hidden;
background: #fff;
white-space: nowrap;
padding: 20rpx;
}

.list-area {
width: 100%;
}

.category-area {
background: white;
height: 80rpx;
padding-left: 20rpx;
padding-right: 20rpx;
line-height: 80rpx;
}

.scroll-view_x {
padding-left: 20rpx;
padding-right: 20rpx;
}

.category-name {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #333;
letter-spacing: 0;
margin-right: 100rpx;
width: 150rpx;
text-align: center;
}

.category-name-c {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #ff2040;
letter-spacing: 0;
margin-right: 100rpx;
width: 150rpx;
text-align: center;
}

.category-name-area {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: rgb(201, 200, 200);
letter-spacing: 0;
/* margin-left: 20rpx; /
width: 300rpx;
text-align: center;
}
/ 分类滑动 */