怎么开设自己的网站,免费icp备案服务码,定向推广,公司网站建设的市场需求先来看效果#xff1a; 实现过程#xff1a;
1.在项目根目录下创建公共组件的目录components#xff0c;在里边创建一个common-title组件#xff0c;里边暂时先输入“每日推荐”4个字。在index.vue引入该组件#xff1b;
2.在推荐的内容区使用scroll-view实现可滚动的视…先来看效果 实现过程
1.在项目根目录下创建公共组件的目录components在里边创建一个common-title组件里边暂时先输入“每日推荐”4个字。在index.vue引入该组件
2.在推荐的内容区使用scroll-view实现可滚动的视图容器实现左右滑动展示推荐的内容。
来看代码的具体实现
view classselectcommon-title/common-titleview classcontentscroll-view scroll-xview classbox v-foritem in 8image src/common/images/preview_small.webp modeaspectFill/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-xtrue 使用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。
