青岛网站关键词,大连网站开发选领超科技,邯山手机网站建设,高校文明建设网站这一节目标是实现底部推荐商品的结构和样式#xff0c;由于这里要求横向滚动#xff0c;所以需要使用上节介绍的 scroll-view 功能#xff0c;并使用 scroll-x 属性支持横向滚动#xff0c;推荐商品区域中的每一个商品是一个单独的 view#xff0c;每个view 中需要写三个组… 这一节目标是实现底部推荐商品的结构和样式由于这里要求横向滚动所以需要使用上节介绍的 scroll-view 功能并使用 scroll-x 属性支持横向滚动推荐商品区域中的每一个商品是一个单独的 view每个view 中需要写三个组件一个 image 渲染图片两个 text 渲染文字
下面我们打开微信开发者工具实现这个需求在 index.wxml 中添加下面的代码
view classgood-hotscroll-view scroll-x classscroll-xviewview classgood-itemimage src../../assets/floor/1.png mode /text鲜花玫瑰/texttext66/text/view/viewviewview classgood-itemimage src../../assets/floor/2.png mode /text鲜花玫瑰/texttext77/text/view/viewviewview classgood-itemimage src../../assets/floor/3.png mode /text鲜花玫瑰/texttext88/text/view/viewviewview classgood-itemimage src../../assets/floor/4.png mode /text鲜花玫瑰/texttext99/text/view/viewviewview classgood-itemimage src../../assets/floor/5.png mode /text鲜花玫瑰/texttext100/text/view/view/scroll-view
/view其主要功能是使用 scroll-x 构建一个横向滑动区域使用 view 对每一个商品进行封装每一个商品由一张 image 图片和两段 text 文本组成对应的图片资源可以从 gitCode 中下载图片源自尚硅谷非个人所有无意冒犯
接着在 index.scss 中添加样式代码如下
.scroll-x {width: 100%;white-space: nowrap;view {display: inline-block;width: 320rpx;height: 420rpx;margin-right: 16rpx;.good-item {display: flex;flex-direction: column;justify-content: space-between;text {:nth-of-type(1) {font-weight: bold;}}}image {width: 100%;height: 320rpx;}:last-child {margin-right: 0rpx;}}}
}css 样式的具体功能为
.scroll-x: width: 100%;: 设置容器的宽度为100%white-space: nowrap;: 防止子元素换行从而实现水平滚动效果 view: display: inline-block;: 将每个视图设置为行内块元素使其在同一行显示width: 320rpx;: 设置每个视图的宽度为320rpx假设这是一个特定的单位如在小程序中使用的rpxheight: 420rpx;: 设置每个视图的高度为420rpxmargin-right: 16rpx;: 设置每个视图右侧的外边距为16rpx增加视图之间的间距 .good-item: display: flex;: 使用Flexbox布局flex-direction: column;: 将子元素垂直排列justify-content: space-between;: 在主轴垂直方向上均匀分布子元素 text: :nth-of-type(1): 选择第一个text元素font-weight: bold;: 将第一个text元素的字体加粗 image: width: 100%;: 设置图片的宽度为100%即占满父容器的宽度height: 320rpx;: 设置图片的高度为320rpx :last-child: margin-right: 0rpx;: 移除最后一个视图右侧的外边距
最后得到的效果为 参考视频尚硅谷微信小程序开发教程
