当前位置：首页 > news >正文

uni-app项目实战笔记3--使用scroll-view实现每日推荐左右滑动效果

news 来源：原创 2025/6/18 20:46:46

先来看效果：

实现过程：

1.在项目根目录下创建公共组件的目录components，在里边创建一个common-title组件，里边暂时先输入“每日推荐”4个字。在index.vue引入该组件；

2.在推荐的内容区使用scroll-view实现可滚动的视图容器实现左右滑动展示推荐的内容。

来看代码的具体实现：

<view class="select"><common-title></common-title><view class="content"><scroll-view scroll-x><view class="box" v-for="item in 8"><image src="/common/images/preview_small.webp" mode="aspectFill"></image></view></scroll-view></view>
</view>

scroll-view 的 scroll-x 属性用于实现 横向滚动（水平滚动） 的容器

再来看SCSS的代码：

.select{padding-top: 30rpx;.content{width: 720rpx;margin-left: 30rpx;margin-top: 30rpx;scroll-view{white-space: nowrap;.box{width: 200rpx;height: 430rpx;display: inline-block;margin-right: 15rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}.box:last-child{margin-right: 30rpx;}}}}

1. 整体结构效果

外层容器 `.select`

.select {padding-top: 30rpx;  // 顶部内边距 30rpx
}

作用：为整个选择器区域添加顶部间距，避免内容紧贴页面顶部。

内容区域 `.content`

.content {width: 720rpx;        // 固定宽度 720rpxmargin-left: 30rpx;   // 左外边距 30rpxmargin-top: 30rpx;    // 顶部外边距 30rpx
}

效果：
- 内容区域宽度为 720rpx，左侧留白 30rpx（可能用于对齐其他元素）。
- 与上方元素保持 30rpx 的间距。

2. 横向滚动区域 `scroll-view`

scroll-view {white-space: nowrap;  // 禁止子元素换行（关键属性）
}

作用：
- white-space: nowrap 强制所有子元素（.box）在同一行排列，实现横向滚动。
- 需配合 scroll-x="true" 使用（HTML 中需显式声明）。

3. 横向滚动子项 `.box`

.box {width: 200rpx;           // 固定宽度height: 430rpx;          // 固定高度display: inline-block;   // 横向排列关键属性margin-right: 15rpx;     // 右侧间距 15rpximage {width: 100%;           // 图片撑满容器height: 100%;          // 图片撑满容器border-radius: 10rpx;  // 圆角 10rpx}
}
.box:last-child {margin-right: 30rpx;     // 最后一个子项右侧间距增大
}