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

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

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

typescript 复制代码
<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="good-item">
        <image src="../../assets/floor/2.png" mode="" />
        <text>鲜花玫瑰</text>
        <text>77</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/3.png" mode="" />
        <text>鲜花玫瑰</text>
        <text>88</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/4.png" mode="" />
        <text>鲜花玫瑰</text>
        <text>99</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/5.png" mode="" />
        <text>鲜花玫瑰</text>
        <text>100</text>
      </view>
    </view>
  </scroll-view>
</view>

其主要功能是使用 scroll-x 构建一个横向滑动区域,使用 view 对每一个商品进行封装,每一个商品由一张 image 图片和两段 text 文本组成;对应的图片资源可以从 gitCode 中下载(图片源自尚硅谷,非个人所有,无意冒犯);

接着在 index.scss 中添加样式代码,如下:

css 复制代码
.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(假设这是一个特定的单位,如在小程序中使用的rpx)
    • height: 420rpx;: 设置每个视图的高度为420rpx
    • margin-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;: 移除最后一个视图右侧的外边距

最后得到的效果为:

参考视频:尚硅谷微信小程序开发教程

相关推荐
云起SAAS2 小时前
ai公司起名取名抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai公司起名取名
黑马源码库miui520862 小时前
JAVA购物返利商品比价系统源码支持微信小程序
微信·微信小程序·小程序·1024程序员节
淡淡蓝蓝4 小时前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
2501_915921435 小时前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者86 小时前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节
2501_915106326 小时前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
游戏开发爱好者89 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
abigale0311 小时前
开发实战 - ego商城 - 补充:小程序性能优化
小程序·uniapp·小程序分包
说私域12 小时前
开源AI智能客服、AI智能名片与S2B2C商城小程序融合下的商家客服能力提升策略研究
人工智能·小程序
游戏开发爱好者817 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview