小程序组件 —— 25 组件案例 - 商品导航区域

这一节主要实现商品导航区的结构和样式,商品导航区没有新的知识点,主要使用之前学习的三个组件:

  • view:视图容器
  • iamge:图片组件
  • text:文本组件

商品导航区由五个商品导航来组成,每一个视频导航都可以看做是一个 view,然后使用 image 来渲染图片,通过 text 来渲染文本,下面我们打开微信开发者工具来实现一下商品导航区的样式:

  • 在 index.wxml 中找到商品导航区域,使用五个 view 用于编写五个商品导航,每个 view 商品导航中有两个组件,分别为 image 和 text,可以在 gitCode 中找到对应的图片(图片源自尚硅谷,非个人所有,无意冒犯),并填写对应的文字内容:

    typescript 复制代码
    <view class="good-nav">
      <view>
        <image src="../../assets/category/cate-1.png" mode=""/>
        <text>鲜花玫瑰</text>
      </view>
      <view>
        <image src="../../assets/category/cate-1.png" mode=""/>
        <text>鲜花玫瑰</text>
      </view>
      <view>
        <image src="../../assets/category/cate-1.png" mode=""/>
        <text>鲜花玫瑰</text>
      </view>
      <view>
        <image src="../../assets/category/cate-1.png" mode=""/>
        <text>鲜花玫瑰</text>
      </view>
      <view>
        <image src="../../assets/category/cate-1.png" mode=""/>
        <text>鲜花玫瑰</text>
      </view>
    </view>
  • 基本功能都填写完后,在 index.scss 中对样式进行优化:

    typescript 复制代码
    .good-nav{
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 20rpx 16rpx;
      border-radius: 10rpx;
      view{
        display: flex;
        flex-direction: column;
        align-items: center;
        image{
          width: 80rpx;
          height: 80rpx;
        }
        text{
          font-size: 24rpx;
          margin-top: 12rpx;
        }
      }
    }
    • .good-nav 类:

      display: flex;:将 .good-nav 元素设置为弹性盒子布局,使其子元素可以灵活地排列。

      justify-content: space-between;:在主轴(默认是水平方向)上,子元素之间的空间会被平均分配,首尾元素会分别靠近容器的两端。

      background-color: #fff;:设置背景颜色为白色。

      padding: 20rpx 16rpx;:设置内边距,上下为 20rpx,左右为 16rpx。

      border-radius: 10rpx;:设置边角的圆角半径为 10rpx,使元素的角变得圆润。

    • 内部的 view 元素:

      display: flex;:同样将 view 元素设置为弹性盒子布局。

      flex-direction: column;:将子元素的排列方向设置为垂直方向(列)。

      align-items: center;:在交叉轴(垂直方向)上,子元素会居中对齐。

    • 内部的 image 元素:

      width: 80rpx;:设置图像的宽度为 80rpx。

      height: 80rpx;:设置图像的高度为 80rpx。

    • 内部的 text 元素:

      font-size: 24rpx;:设置文本的字体大小为 24rpx。

      margin-top: 12rpx;:设置文本与其上方元素之间的外边距为 12rpx。

相关推荐
流***陌9 分钟前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB11 分钟前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域3 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_916007476 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗8 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_9159214312 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手12 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q196328847512 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
韩立学长15 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
2501_9159184115 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview