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

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

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

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

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

    <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 中对样式进行优化:

    .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。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/66042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Ubuntu】安装华为的MindSpore

目录 1 安装Anaconda 2 更换国内源 3 安装MindSpore 1 安装Anaconda 2 更换国内源 具体方法如下&#xff1a; 打开命令行 cmd 工具&#xff0c;输入以下命令。 ① Conda 换源 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ c…

AWS EMR基础知识

EMR Overview 知识点&#xff1a;EMR是可简化大数据框架运行的托管集群平台&#xff0c;能以可扩展且具成本效益的方式处理和分析大量数据&#xff0c;应用于大数据分析、数据处理、机器学习、数据湖和数据仓库等场景。注意事项&#xff1a;根据业务需求选择合适的使用场景&am…

MarkDown怎么转pdf;Mark Text怎么使用;

MarkDown怎么转pdf 目录 MarkDown怎么转pdf先用CSDN进行编辑,能双向看版式;标题最后直接导出pdfMark Text怎么使用一、界面介绍二、基本操作三、视图模式四、其他功能先用CSDN进行编辑,能双向看版式; 标题最后直接导出pdf Mark Text怎么使用 Mark Text是一款简洁的开源Mar…

C# 设计模式概况

什么是设计模式 大家熟知的GOF23种设计模式&#xff0c;源自《Design Patterns: Elements of Reusable Object-Oriented Software》一书&#xff0c;由 Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides 合著&#xff0c;四人组Gang of Four简称GOF。总结了在面向…

内网渗透:域 Kerberos 认证机制

1. Kerberos 协议简介 Kerberos 是一种网络认证协议&#xff0c;其设计目标是通过密钥系统为客户端/服务器应用程序提供强大的认证服务。 该协议具有以下特点&#xff1a; 去中心化&#xff1a;认证过程独立于主机操作系统&#xff0c;不依赖基于主机地址的信任。安全传输&a…

Cursor小试1.生成一个网页的接口请求工具

一般开发过程中,会涉及到接口的调试,往往有时候开发的电脑不是我们自己的,没有安装一些类似postman 的接口调用工具,所以发现问题或者要测试某些接口是否正常的时候会很麻烦,而且现在网上也没有找到很好的免费的网页端接口请求的网址,所以我们使用Cursor来编写这样一个小工具, …

1961-2022年中国大陆多干旱指数数据集(SPI/SPEI/EDDI/PDSI/SC-PDSI/VPD)

DOI: 10.5194/essd-2024-270 干旱指数对于评估和管理缺水和农业风险至关重要;然而&#xff0c;现有数据集中缺乏统一的数据基础&#xff0c;导致不一致&#xff0c;对干旱指数的可比性提出了挑战。本研究致力于创建CHM_Drought&#xff0c;这是一个创新且全面的长期气象干旱数…

C# 在PDF中添加和删除水印注释 (Watermark Annotation)

目录 使用工具 C# 在PDF文档中添加水印注释 C# 在PDF文档中删除水印注释 PDF中的水印注释是一种独特的注释类型&#xff0c;它通常以透明的文本或图片形式叠加在页面内容之上&#xff0c;为文档添加标识或信息提示。与传统的静态水印不同&#xff0c;水印注释并不会永久嵌入…

单片机-蜂鸣器实验

#include "reg52.h" typedef unsigned char u8; typedef unsigned int u16; sbit BEEPP2^5; //将 P2.5 管脚定义为 BEEP P2.5默认高电平 void delay_10us(u16 ten_us){ while(ten_us--); } void main() { u16 i2000;//脉冲2000次 while(1) { …

LLVM防忘录

目录 Windows中源码编译LLVMWindows下编译LLVM Pass DLL Windows中源码编译LLVM 直接从llvm-project下载源码, 然后解压后用VS2022打开该目录, 然后利用VS的开发终端执行: cmake -S llvm -B build -G "Visual Studio 17 2022" -DLLVM_ENABLE_PROJECTSclang -DLLVM_…

解释一下:运放的输入失调电流

输入失调电流 首先看基础部分:这就是同相比例放大器 按照理论计算,输入VIN=0时,输出VOUT应为0,对吧 仿真与理论差距较大,有200多毫伏的偏差,这就是输入偏置电流IBIAS引起的,接着看它的定义 同向和反向输入电流的平均值,也就是Ib1、Ib2求平均,即(Ib1+Ib2)/2 按照下面…

【双指针】算法题(二)

【双指针】算法题&#xff08;二&#xff09; 前言&#xff1a; 这里是几道算法题&#xff0c;双指针说明在上一章。 一、有效三角形的个数 题目链接&#xff1a; 有效三角形的个数 题目叙述&#xff1a; 解法一&#xff1a;暴力循环&#xff0c;叠加三层for循环&#xff0c…

Socket编程入门

一个服务端 对应 一个客户端&#xff0c;双方可以通信。 1、服务端代码 public class EchoServerDemo { public static void main(String[] args) { // 端口号从 1024-65535 try { ServerSocket ss new ServerSocket(9007); System.out.println("Server start...&qu…

SQL 分析函数与聚合函数的组合应用

目标&#xff1a;掌握 SQL 中分析函数&#xff08;窗口函数&#xff09;与聚合函数的组合使用&#xff0c;通过实际案例实现复杂业务需求&#xff0c;如同比、环比和趋势分析。 1. 分析函数与聚合函数的区别 聚合函数&#xff08;Aggregate Functions&#xff09;&#xff1a;…

docker 安装influxdb

docker pull influxdb mkdir -p /root/influxdb/data docker run -d --name influxdb -p 8086:8086 -v /root/influxdb/data:/var/lib/influxdb influxdb:latest#浏览器登录&#xff1a;http://192.168.31.135:8086&#xff0c;首次登录设置用户名密码&#xff1a;admin/admin1…

深入剖析MySQL数据库架构:核心组件、存储引擎与优化策略(四)

慢查询日志&#xff0c;顾名思义&#xff0c;就是查询慢的日志&#xff0c;是指mysql记录所有执行超过long_query_time&#xff08;默认的时间10秒&#xff09;参数设定的时间阈值的SQL语句的日志。该日志能为SQL语句的优化带来很好的帮助。默认情况下&#xff0c;慢查询日志是…

【工具类】RedisUtil 操作相关

目标 一行代码调用 安装 redis <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>hutool 工具类 <dependency><groupId>cn.hutool</grou…

Ansys Discovery 中的网格划分方法:探索模式

本篇博客文章将介绍 Ansys Discovery 中可用于在探索模式下进行分析的网格划分方法。我们将在下一篇博客中介绍 Refine 模式下的网格划分技术。 了解 Discovery Explore 模式下的网格划分 网格划分是将几何模型划分为小单元以模拟系统在不同条件下的行为的过程。这是通过创建…

MT8788安卓核心板_MTK8788核心板参数_联发科模块定制开发

MT8788安卓核心板是一款尺寸为52.5mm x 38.5mm x 2.95mm的高集成度电路板&#xff0c;专为各种智能设备应用而设计。该板卡整合了处理器、图形处理单元(GPU)、LPDDR3内存、eMMC存储及电源管理模块&#xff0c;具备出色的性能与低功耗特性。 这款核心板搭载了联发科的MT8788处理…

Linux实验报告14-Linux内存管理实验

目录 一&#xff1a;实验目的 二&#xff1a;实验内容 1、编辑模块的源代码mm_viraddr.c 2、编译模块 3、编写测试程序mm_test.c 4、编译测试程序mm_test.c 5、在后台运行mm_test 6、验证mm_viraddr模块 一&#xff1a;实验目的 (1)掌握内核空间、用户空间&#xff…