最新备案网站查询珠海市网站建设制作设计平台

先来看效果：

实现过程：

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;     // 最后一个子项右侧间距增大
}

• 效果：

  • 每个 .box 是一个 固定尺寸（200×430rpx）的横向卡片，内部包含一张图片。

  • 图片完全填充卡片，并带有 10rpx 圆角。

  • 卡片之间通过 margin-right: 15rpx 保持间距，最后一个卡片右侧间距为 30rpx。