小程序组件 —— 28 组件案例 - 推荐商品区域 - 实现结构样式

然后就去远行吧

已于 2025-01-04 17:28:54 修改

阅读量803

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端微信小程序文章标签：小程序

于 2025-01-04 14:40:07 首次发布

本文链接：https://blog.csdn.net/qq_37388085/article/details/144929361

在这里插入图片描述
这一节目标是实现底部推荐商品的结构和样式，由于这里要求横向滚动，所以需要使用上节介绍的 scroll-view 功能，并使用 scroll-x 属性支持横向滚动，推荐商品区域中的每一个商品是一个单独的 view，每个view 中需要写三个组件：一个 image 渲染图片，两个 text 渲染文字；

下面我们打开微信开发者工具实现这个需求，在 index.wxml 中添加下面的代码：

<view class="good-hot">
  <scroll-view scroll-x class="scroll-x">
    <view>
      <view class="good-item">
        <image src="../../assets/floor/1.png" mode="" />
        <text>鲜花玫瑰</text>
        <text>66</text>
      </view>
    </view>
    <view>
      <view class