Harmony商城项目

news2024/9/27 5:22:18

目录：

    • 1、启动项目看效果图
    • 2、代码分析

1、启动项目看效果图

在这里插入图片描述

2、代码分析


import CommonConstants from '../constants/CommonConstants';
import WomanPage from './components/WomanPage'
import ManPage from './components/ManPage'
import HomePage from './components/HomePage'
import SportPage from './components/SportPage'
import ComputerPage from './components/ComputerPage'
import Mine from './Mine'
import Shop from './Shop';


@Entry
@Component
struct MainPage {
//@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。
//在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。
//@State装饰的变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。
//@State装饰的变量拥有以下特点：
//@State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步，与@Link、@ObjectLink装饰变量之间建立双向数据同步。
//@State装饰的变量生命周期与其所属自定义组件的生命周期相同。

  @State currentIndex: number = CommonConstants.HOME_TAB_INDEX;
  @State changeValue: string = ''
  @State submitValue: string = ''

//TabsController
//Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。
//导入对象
//controller: TabsController = new TabsController()
  private tabController: TabsController = new TabsController()
  @State enableFlag : boolean = true;
  
//SearchController
//Search组件的控制器，目前通过它可控制Search组件的光标位置。
//导入对象
//controller: SearchController = new SearchController()
  searchController: SearchController = new SearchController()

  /*搜索框*/
  //@Builder装饰器：自定义构建函数
  @Builder SearchUI(){
    Row(){
      Search({ value: this.changeValue, placeholder: 'search...', controller: this.searchController })
        .searchButton('搜索')
        .width(CommonConstants.FULL_PARENT)
        .height(30)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14 , weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
    }.padding({ top: $r('app.float.home_grid_margin'), left: $r('app.float.home_list_padding') })
  }
  /*底部Tab构造器*/
  //https://blog.csdn.net/nopyramid/article/details/135557340
  /*
官方给出的样例一共有四个输入：
title：tabbar显示的文本
targetId：tabbar的唯一编号
selectedImg：激活时的图标
normalImg：去激活时的图标
*/
  @Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === index ? selectedImg : normalImg)
        .width($r('app.float.mainPage_baseTab_size'))
        .height($r('app.float.mainPage_baseTab_size'))
      Text(title)
        .margin({ top: $r('app.float.mainPage_baseTab_top') })
        .fontSize($r('app.float.main_tab_fontSize'))
        .fontColor(this.currentIndex === index ? $r('app.color.tab_selected') : $r('app.color.tab_unselected'))
    }
    .justifyContent(FlexAlign.Center)
    .height($r('app.float.mainPage_barHeight'))
    .width(CommonConstants.FULL_PARENT)
    .onClick(() => {
      this.currentIndex = index;
      this.tabController.changeIndex(this.currentIndex);
    })
  }

  resetVisibleAndLength(index : number){
    if (index === 0) {
      this.enableFlag = true;
    } else {
      this.enableFlag = false;
    }
  }

/*
https://blog.csdn.net/m0_74037076/article/details/140128539
此处搜索框没有实现点击搜索功能，可以参考此链接主要是调用Bmob.Query的where查询，用到了LIKE这个模糊查询方法。

还可以通过从数据库中请求数据进行过滤实现：
存储鸿蒙有两种方式：
1、首选项存储（适合存储少量的数据，已键值对的形式存储）
2、关系型数据存储RDB（适合大量数据存储）
https://blog.csdn.net/qq_53123067/article/details/135554427
https://blog.csdn.net/2302_79548774/article/details/140646552
*/
  build() {
    Column() {
      /*搜索框*/
      Row(){
        Search({ value: this.changeValue, placeholder: '男士羽绒服', controller: this.searchController })
          .searchButton('搜索')
          .width(CommonConstants.FULL_PARENT)
          .height(30)
          .backgroundColor('#F5F5F5')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .onSubmit((value: string) => {
            this.submitValue = value
          })
          .onChange((value: string) => {
            this.changeValue = value
          })
      }.padding({ top: $r('app.float.home_grid_margin'), left: $r('app.float.home_list_padding') })
      .visibility(this.enableFlag ? Visibility.Visible : Visibility.None)


      /*顶部Tab*/
      Column() {
        Tabs({ barPosition: BarPosition.Start }) {
          /*推荐页*/
          TabContent() {HomePage()}.tabBar(CommonConstants.HOME_TITLE)
          /*女装页*/
          TabContent() {WomanPage()}.tabBar(CommonConstants.WOMAN_TITLE)
          /*男装页*/
          TabContent() {ManPage()}.tabBar(CommonConstants.MAN_TITLE)
          /*运动页*/
          TabContent() {SportPage()}.tabBar(CommonConstants.SPORT_TITLE)
          /*电脑办公页*/
          TabContent() {ComputerPage()}.tabBar(CommonConstants.TEC_TITLE)
          /*其他*/
          TabContent() {}.tabBar(CommonConstants.OTHER_TITLE)
        }.barHeight('35vp')
        .vertical(false).scrollable(true).barMode(BarMode.Scrollable)
        .onChange((index: number) => {
          console.info(index.toString())
        }).width('100%').backgroundColor(0xF1F3F5)
      }.width('100%')
      .height('87%')
      .visibility(this.enableFlag ? Visibility.Visible : Visibility.None)

      /*底部Tab*/
      Column() {
        Tabs({ barPosition: BarPosition.End, controller : this.tabController}) {
          /*首页*/
          TabContent() {
            HomePage()
          }
          .padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
          .backgroundColor($r('app.color.mainPage_backgroundColor'))
          .tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX, $r('app.media.home_selected'), $r('app.media.home_normal')))
          /*购物车*/
          TabContent() {
            Shop()
          }
          .padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
          .tabBar(this.TabBuilder(CommonConstants.SHOP_TITLE, CommonConstants.SHOP_TAB_INDEX, $r('app.media.shopping_selected'), $r('app.media.shopping_normal')))
          /*个人中心*/
          TabContent() {
            Mine()
          }.padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
          .tabBar(this.TabBuilder(CommonConstants.USER_TITLE, CommonConstants.USER_TAB_INDEX, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.debug('index number: '+index.toString())
          this.resetVisibleAndLength(index)
        }).width('100%')
        .backgroundColor(0xF1F3F5)
      }
      .width('100%')
      .height(this.enableFlag ? '50vp' : '100%')
      /*-----------------------------end------------------------------------*/
    }.width('100%')
    .height(CommonConstants.FULL_PARENT)
  }

}

@Component
struct TopTabDisplay{
  enableFlag : boolean = null!;

  build(){
    Column() {
      Tabs({ barPosition: BarPosition.Start }) {
        /*推荐页*/
        TabContent() {
          HomePage()
        }.tabBar(CommonConstants.HOME_TITLE)
        /*女装页*/
        TabContent() {
          WomanPage()
        }
        .tabBar(CommonConstants.WOMAN_TITLE)
        /*男装页*/
        TabContent() {
          ManPage()
        }
        .tabBar(CommonConstants.MAN_TITLE)
        /*运动页*/
        TabContent() {
          SportPage()
        }
        .tabBar(CommonConstants.SPORT_TITLE)
        /*电脑办公页*/
        TabContent() {
          ComputerPage()
        }
        .tabBar(CommonConstants.TEC_TITLE)
        /*其他*/
        TabContent() {

        }
        .tabBar(CommonConstants.OTHER_TITLE)
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .width('100%')
      .backgroundColor(0xF1F3F5)
    }
    .width('100%')
    .height('85%')
    .visibility(this.enableFlag ? Visibility.Visible : Visibility.None)
  }
}



@Component
struct BottomTabContentDisplay{
  build(){

  }
}

待完善中。。。。。。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Teams集成-会议侧边栏应用开发-实时转写

Teams集成-会议侧边栏应用开发-实时转写

Teams虽然提供了转写的接口，但是不是实时的，即便使用订阅事件也不是实时的，为了达到实时转写的效果，使用recall.ai的转录和assembly_ai的转写实现。 前提：除Teams会议侧边栏应用开发-会议转写-CSDN博客的基本要求外&a…
阅读更多...
实战教程！Zabbix 监控 Spark 中间件配置教程

实战教程！Zabbix 监控 Spark 中间件配置教程

本文将介绍以JMX方式监控Spark中间件。JMX具有跨平台、灵活性强、监控能力强、易于集成与扩展、图形化界面支持以及安全性与可配置性等多方面的优势，是监控Spark等复杂Java应用程序的重要工具之一。 Apache Spark 是一个开源的大数据处理框架，它提供了快…
阅读更多...
【深度学习】ubuntu系统下docker部署cvat的自动标注功能（yolov8 segmentation）

【深度学习】ubuntu系统下docker部署cvat的自动标注功能（yolov8 segmentation）

cvat部署自动标注教程 前言step1. 拷贝yolov8项目step2. 创建yolov8的本地镜像step3. 在cvat中构建我们的工作空间 前言 安装docker和cvat的流程我这里就不赘述了，这样的教程还是挺多的，但是对于使用docker在cvat上部署自动标注算法的整个详细流程&#…
阅读更多...
【MySQL】MVCC及其实现原理

【MySQL】MVCC及其实现原理

目录 1. 概念介绍 什么是MVCC 什么是当前读和快照读 MVCC的好处 2. MVCC实现原理 隐藏字段 Read View undo-log 数据可见性算法 3. RC和RR隔离级别下MVCC的差异 4. MVCC＋Next-key-Lock 防止幻读 1. 概念介绍 什么是MVCC Multi-Version Concurrency Cont…
阅读更多...
通信工程学习：什么是FDD频分双工

通信工程学习：什么是FDD频分双工

FDD：频分双工 FDD（频分双工，Frequency Division Duplexing）是一种无线通信技术，它通过将频谱划分为上行和下行两个不重叠的频段来实现同时双向通信。以下是FDD频分双工的详细解释： 一、定义与原理 定义： FDD是一种无线通信系统的工作模式，其中上行链路（从移动…
阅读更多...
以Flask为基础的虾皮Shopee“曲线滑块验证码”识别系统部署

以Flask为基础的虾皮Shopee“曲线滑块验证码”识别系统部署

以Flask为基础的虾皮Shopee“曲线滑块验证码”识别系统部署 一、验证码类型二、简介三、Flask应用 一、验证码类型 验证码类型：此类验证码存在两个难点，一是有右侧有两个凹槽，二是滑块的运动轨迹不是直线的，而是沿着曲线走的&…
阅读更多...
您的业​​务端点是否完全安全？

您的业​​务端点是否完全安全？

根据 2023 年数据泄露调查报告，52% 的数据泄露涉及凭证泄露。这令人担忧，不是吗？ 在当今的数字世界中，企业严重依赖技术，保护您的设备（端点）至关重要。这些设备（包括计算机、笔记本…
阅读更多...
MySQL从入门到精通 - 基础篇

MySQL从入门到精通 - 基础篇

一、MySQL概述 1. 数据库相关概念 二、SQL （1）SQL通用语法 （2）SQL分类 （3）数据定义语言DDL 数据库操作 表操作 数据类型 1. 数值类型 2. 字符串类型 二进制数据：以二进制格式（0和…
阅读更多...
uniapp 知识点

uniapp 知识点

自定义导航 在page.json navigationstyle":"custom"navigateTo传参 页面传参只能onLoad(option)里面拿 px和upx的关系 在750设计图中，1px1upx 路由 navigateBack返回上一页 重定向 其实就是把当前页面干掉了 公共组件和页面共同点 computed,watc…
阅读更多...
基于微信小程序的智能汽车充电站系设计与实现(源码+定制+文档）

基于微信小程序的智能汽车充电站系设计与实现(源码+定制+文档）

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
Spring Boot技术：构建高效网上购物平台

Spring Boot技术：构建高效网上购物平台

第3章 系统分析 3.1 可行性分析 在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、操作上、经济上等方面来考虑这个系统到底值不值得开发。…
阅读更多...
【Vue】Vue3 的初始化过程

【Vue】Vue3 的初始化过程

核心流程是patch，然后Patch有一个分支，分别处理组件和浏览器原生标签。分别对应processElement和processComponent，从上到下插入，知道处理完成，才把顶层div插入到浏览器。“一次性渲染，而不是一个个一个渲染…
阅读更多...
[论文笔记] Chain-of-Thought Reasoning without Prompting

[论文笔记] Chain-of-Thought Reasoning without Prompting

分析： 在CoT解码路径中，我们可以看到模型在第三个位置（𝑖? = 3）开始展示推理过程，并且给出了正确的答案“8”。模型首先识别出说话者有3个苹果，然后识别出爸爸比说话者多2个，即5个苹果，最后将这两个数量相加得到总数8个苹果。 这个例子表明，通过探索替代的解码路径…
阅读更多...
【每天学个新注解】Day 7 Lombok注解简解（六）—@With

【每天学个新注解】Day 7 Lombok注解简解（六）—@With

With 创建一个新的对象，该对象是当前对象的副本，但某些字段的值可以被更改。 1、如何使用 With 可以使用在类上，也可以使用在成员变量上。加在类上相当于给所有成员变量 With可以配合AccessLevel使用，创建出指定访问修饰符的wi…
阅读更多...
多模态大模型学习（一）

多模态大模型学习（一）

参考：https://www.bilibili.com/video/BV1kT411o7a6?p2&spm_id_frompageDriver&vd_source156234c72054035c149dcb072202e6be 余弦相似度，让正样本内积趋近于1，负样本趋近于-1。度量学习。N特别大时，负样本远大于正样本&…
阅读更多...
PHP之 实现https ssl证书到期提醒，通过企微发送消息

PHP之 实现https ssl证书到期提醒，通过企微发送消息

参考文章 https://blog.51cto.com/17099933344/1935194 https://blog.csdn.net/m0_37346206/article/details/127333463 https://www.cnblogs.com/tk-bolg/p/18108106 使用的企微接口 https://qyapi.weixin.qq.com/cgi-bin/message/send 查询 ssl证书到期时间 // ssl证书即将…
阅读更多...
基于BiLSTM+Transformer混合模型实现交通流量时序预测(PyTorch版)

基于BiLSTM+Transformer混合模型实现交通流量时序预测(PyTorch版)

前言 系列专栏:【深度学习：算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域，讨论了各种复杂的深度神经网络思想，如卷积神经网络、循环神经网络、生成对…
阅读更多...
2024年研究生数学建模“华为杯”E题——肘部法则、k-means聚类、目标检测(python)、ARIMA、逻辑回归、混淆矩阵（附：目标检测代码）

2024年研究生数学建模“华为杯”E题——肘部法则、k-means聚类、目标检测(python)、ARIMA、逻辑回归、混淆矩阵（附：目标检测代码）

文章目录 一、情况介绍二、思路情况二、代码展示三、感受 一、情况介绍 前几天也是参加了研究生数学建模竞赛（也就是华为杯），也是和本校的两个数学学院的朋友在网上组的队伍。昨天（9.25）通宵干完论文（一条…
阅读更多...
Windows安装openssl开发库

Windows安装openssl开发库

1 下载openssl安装包并安装 下载网址： https://slproweb.com/products/Win32OpenSSL.html 下载对应的安装版本。 双击安装包，一路下一步完成安装。注意：1.安装路径不要有空格； 2. 建议不要把DLL拷贝到系统路径。 2 编辑代码 …
阅读更多...
“类型名称”在Go语言规范中的演变

“类型名称”在Go语言规范中的演变

Go语言规范（The Go Programming Language Specification）[1]是Go语言的核心文档，定义了该语言的语法、类型系统和运行时行为。Go语言规范的存在使得开发者在实现Go编译器时可以依赖一致的标准，它确保了语言的稳定性和一致性&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023