鸿蒙的基本项目_tabbar，首页，购物车，我的

以上效果，由四个ets文件实现，分别是容器页面。首页，购物车，我的。

页面里的数据，我是用json-server进行模拟的数据。

一、容器页面

使用组件Tabs和Tabcontent结合。

import Home from "./Home";
import ShoppingCar from "./ShoppingCar";
import My from "./My";@Entry
@Component
struct TabsExample {// 定义变量，表示当前选中的下标@State currentIndex:number = 0;@State arr:Array<Object> =[{icon:"/imgs/home.png",selectedIcon:"/imgs/home2.png",text:"首页"},{icon:"/imgs/gouwuche.png",selectedIcon:"/imgs/gouwuche2.png",text:"购物车"},{icon:"/imgs/wode.png",selectedIcon:"/imgs/wode2.png",text:"我的"}]build() {Column() {Tabs({ barPosition: BarPosition.End }) {ForEach(this.arr,(item,idx)=>{TabContent() {if(this.currentIndex==0){Home()}else if(this.currentIndex==1){ShoppingCar()}else{My()}}.tabBar({icon: (this.currentIndex==idx)?item.selectedIcon:item.icon,text:item.text})})}.width(360).height("100%").onChange((idx)=>{this.currentIndex = idx;})}.width('100%')}
}

二、首页

import http from '@ohos.net.http';
import router from '@ohos.router';interface IBook{id:string,name:string,author:string,publish:string,img:string
}@Entry
@Component// 对外开放
export default struct Home {@State books:Array<IBook> = [];@State imgs: Array<string> = [];scroller: Scroller = new Scroller()// 创建http的请求对象httpRequest = http.createHttp();// 获取轮播图数据getBanners(){this.httpRequest.request("http://localhost:3000/bannerImgs",(err,data)=>{if(!err){this.imgs = JSON.parse(data.result as string);this.initScroll();}})}// 获取书籍信息getBooks(){//发送请求this.httpRequest.request("http://localhost:3000/books",(err,data)=>{if(!err){// console.log("data",data)//   data对象的result属性是数据//   console.log("data.result",data.result)//   JSON.parse():把字符串转成json对象。this.books = JSON.parse(data.result as string);}})}// aboutToAppear():这个生命周期钩子函数的调用时机：当本页面（组件）加载时，aboutToAppear(){this.getBooks();this.getBanners();}// 自行实现轮播图功能：initScroll(){let index = 0;let maxIndex = this.imgs.length-1;setInterval(()=>{index++;if(index>maxIndex){index = 0;}this.scroller.scrollTo({xOffset:index*400,yOffset:0,animation:{duration:1000,curve:Curve.Linear}})},2000)}build() {// 最外层使用弹性盒布局，纵向分为三部分：搜索框，滚动容器，底部。Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {// 1、搜索框Search({ placeholder: '请输入您要搜索的内容', icon: "imgs/search01.png" }).searchButton('搜索').textAlign(TextAlign.Center).width("100%").height(60).backgroundColor('#F5F5F5').placeholderColor(Color.Grey).placeholderFont({ size: 20, weight: 400 }).textFont({ size: 30, weight: 400 }).onSubmit(()=>{console.log("onSubmit")router.pushUrl({url:"pages/SearchPage"})})Scroll() {Column() {// 1）、轮播图List({scroller:this.scroller}){ForEach(this.imgs,(item)=>{ListItem(){Image(item).width(400).height("100%")}})}.width("100%").height(250).listDirection(Axis.Horizontal)Swiper(){ForEach(this.imgs,(item)=>{Image(item).width(400).height("100%")})}// 2）、导航Grid() {GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}GridItem() {Column() {Image("https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png").width(40).height(40)Text("京东超市")}}}.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr').columnsGap(10).width('100%').backgroundColor(0xededed).height(180)// 3）、列表Column(){ForEach(this.books,(item)=>{Row(){Image(item.img).width(120).height(120).margin(20).onClick(()=>{// 跳转到详情页面的同时，传递了参数：bookidrouter.pushUrl({url:"pages/Detail",params:{bookid:item.id}})})Column(){Text(item.name).fontSize(22).width("100%").margin(10)Text(item.author).fontSize(22).width("100%").margin(10)Text(item.publish).fontSize(22).width("100%")}.width(200).height("100%")}.width("95%").height(140).margin(10).backgroundColor(0xdddddd).borderRadius(10).margin(10)})}.width("100%")}.width("100%")}.width("100%").height("100%").align(Alignment.TopStart)}.width("100%").height("100%")}
}

三、购物车

import router from '@ohos.router';
import http from '@ohos.net.http';
import {storage} from "../utils/globalData"// 自定义类型：商品类型interface IBook{isChecked?:boolean,id:string,name:string,price:number,count:number,smallJi?:number,limit?:number
}@Entry
@Component
export default struct ShoppingCar {// 定义状态// 购物车的商品@State bookList:Array<IBook> = []// 全选复选框的数据@State isAllChecked:boolean = false;// 定义一个状态，表示当前是否登录@State isLogin:boolean = storage.get("username");//获取购物车数据：getCarts(){const httpCreate = http.createHttp();httpCreate.request(`http://localhost:3000/carts`,(err,data)=>{if(!err){this.bookList = JSON.parse(data.result as string);}})}// 开闭原则：对扩展开放，对修改（逻辑）关闭。进一步解释，最好程序写成可配置的（数据就是配置项）。// 页面（组件）加载完毕aboutToAppear(){// 如果没有登录，则不获取购物车的数据if(this.isLogin){this.getCarts();}}// 更新数量updateCount(item){const httpCreate = http.createHttp();httpCreate.request(`http://localhost:3000/carts/${item.id}`,{method:http.RequestMethod.PUT,extraData:{name:item.name,price:item.price,count:item.count,smallJi:item.smallJi}},(err,data)=>{if(!err){//更新数量功后，重新获取最新数据this.getCarts();}})}// 定义加号按钮的功能addCount(item:IBook){//   点击加号按钮if(item.limit && item.count==item.limit){ //做限购的处理return;}item.count++;item.smallJi = item.count*item.price;console.log("item.count",item.count);this.bookList = [...this.bookList];this.updateCount(item);}// 定义减号按钮的功能subCount(item:IBook){//   点击减号按钮if(item.count==1){return;}item.count--;item.smallJi = item.count*item.price;console.log("item.count",item.count);this.bookList = [...this.bookList];this.updateCount(item);}// 全选功能checkAll(){// 当界面上的复选框选中状态发生变化时，数据跟着变化this.isAllChecked = !this.isAllChecked;//让其它商品的选中状态跟着同步发生变化this.bookList.forEach(item=>item.isChecked = this.isAllChecked);this.bookList = [...this.bookList];}// 反向控制全选框backCheckAll(item:IBook){console.log(item.name+"的复选框被点了")item.isChecked = !item.isChecked;// console.log("item.isChecked",item.isChecked)// 数组的api：every 表示 当数组的每一项如果都符合回调函数里写的条件时，every的返回值是true；否则，返回false。// if(this.bookList.every(item=>item.isChecked==true)===true){//   this.isAllChecked= true;// }else{//   this.isAllChecked = false;// }this.isAllChecked = this.bookList.every(item=>item.isChecked==true);this.bookList = [...this.bookList];}// 总计totalMoney(){// let money = 0;// this.bookList.forEach(item=>{//   if(item.isChecked){//     money+=item.smallJi;//   }// })// return money;//return this.bookList.reduce((preValue,item)=>{return preValue+(item.isChecked?item.smallJi:0)},0)}// 删除购物车的商品deleteGoods(id){const httpCreate = http.createHttp();httpCreate.request(`http://localhost:3000/carts/${id}`,{method:http.RequestMethod.DELETE},(err,data)=>{if(!err){//删除成功后，重新获取最新数据this.getCarts();}})}// UI的描述build() {Column(){// 本页面的标签Row() {Image($r("app.media.back")).width(50).height(30).margin(20).onClick(()=>{router.back();})Blank().width(60)Text("购物车").fontSize(30).width("100%").height(60)}if(!this.isLogin){Column(){Text("亲，您还没有登录").fontSize(30).fontColor(Color.Red);Button("请登录").onClick(()=>{router.replaceUrl({url:"pages/Login",params:{from:"pages/Index",data:1}})})}}else{// 购物车的标题行Row(){Checkbox().select(this.isAllChecked).onClick(()=>{this.checkAll();})Text("名称").width(80)Text("价格").width(40)Text("数量").width(96).textAlign(TextAlign.Center)Text("小计").width(60).textAlign(TextAlign.Center)Text("删除").width(60).textAlign(TextAlign.Center)}.width("100%").height(60).backgroundColor(0xededed)// 购物车中的数据的显示ForEach(this.bookList,(item,idx)=>{Row(){Checkbox().select(item.isChecked).onClick(()=>{this.backCheckAll(item);})Text(item.name).width(65)Text(item.price.toString()).width(50).textAlign(TextAlign.Center)Counter() {Text(this.bookList[idx].count.toString())}.margin(10).onInc(() => {this.addCount(item);}).onDec(() => {this.subCount(item);})// 小计Text((this.bookList[idx].smallJi).toString()).width(55)Image("/imgs/delete.png").width(40).height(40).onClick(()=>{this.deleteGoods(item.id)})}.width("100%").height(60)})Divider().strokeWidth(10)Text(`总计：${this.totalMoney()}`)}}.width("100%").height("100%")}
}

四、我的


import {storage} from "../utils/globaldata"import router from '@ohos.router'
@Entry
@Component
export default struct My {//页面创建加载完毕aboutToAppear(){console.log("My:aboutToAppear")}// 页面显示onPageShow(){console.log("My:onPageShow")}// 页面隐藏onPageHide(){console.log("My:onPageHide")}// 销毁aboutToDisappear(){console.log("My:aboutToDisappear")}toLogin(){router.replaceUrl({url:"pages/Login",params:{from:"pages/Index",data:2}})}logout(){storage.delete("username");router.pushUrl({url:"pages/Index"})}build() {Scroll() {Column() {Row(){Image($r("app.media.back")).width(50).height(30).margin(20).onClick(()=>{router.back();})Button("去注册").onClick(()=>{router.pushUrl({url:"pages/Reg"})})Button("去登录").onClick(()=>{this.toLogin()})Button("退出登录").onClick(()=>{this.logout()})Button("修改密码").onClick(()=>{router.pushUrl({url:"pages/Password"})})}.width("100%").height(60)Row() {Image("/imgs/1.jpg").width(140).height(140).borderRadius(70).onClick(()=>{this.toLogin();})}.width("100%").height(200).margin({top: 50}).justifyContent(FlexAlign.Center)// 如果当前处于登录状态（是否保存着有用户名）if(storage.get('username')){Text(storage.get('username')).fontSize(30)Text(storage.get('phone')).fontSize(30).margin(10)}Blank().height(20)Divider().strokeWidth(2).backgroundColor(0xededed)Blank().height(20)Grid() {GridItem() {Text("待付款").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("我的订单").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("店铺关注").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').columnsGap(10).rowsGap(10).width('95%').height(110).backgroundColor(Color.White).borderRadius(10)Blank().height(20)Divider().strokeWidth(2).backgroundColor(0xededed)Blank().height(20)Grid() {GridItem() {Text("优惠券").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("我的足迹").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("我的收藏").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("浏览记录").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("我的常卖").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}GridItem() {Text("我的推荐").fontSize(20).width(90).height(90).backgroundColor(0xededed).borderRadius(10).textAlign(TextAlign.Center)}}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').columnsGap(10).rowsGap(10).width('95%').height(220).backgroundColor(Color.White).borderRadius(10)}.align(Alignment.Start)}.height("100%").width("100%")}
}

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

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

相关文章

短剧付费变现小程序源码系统：开通会员+在线充值+风口项目，变现利器+完整的代码包 附带部署安装教程

短剧付费变现小程序源码系统：开通会员+在线充值+风口项目，变现利器+完整的代码包 附带部署安装教程

在当今数字化时代&#xff0c;短剧付费变现小程序源码系统已经成为了一个热门的风口项目。它以开通会员、在线充值、完整的代码包等特色功能&#xff0c;成为了一种有效的变现利器&#xff0c;受到了广泛的关注和应用。本文将详细介绍这个源码系统的背景和特色功能&#xff0c;…
阅读更多...
实现阿里云oss云存储，简单几步

实现阿里云oss云存储，简单几步

一、前言 虽然平常学习用的不多&#xff0c;但是用的时候再去找官方文档&#xff0c;也很繁琐&#xff0c;不如直接整理以下&#xff0c;方便粘贴复制&#xff0c;本文介绍两种图片上传方式①普通上传②服务端签名直传 1.普通上传 加载maven依赖 <dependency><grou…
阅读更多...
centos 安装oracle 11.2.04 并配置数据库自启动操作记录，一次完成

centos 安装oracle 11.2.04 并配置数据库自启动操作记录，一次完成

环境&#xff1a; centos版本7.3&#xff0c;安装的有图形化界面 Oracle11.2.04&#xff0c;之所以选择这个版本是因为网上有人说11其他版本的在安装的过程中会出现这样或那样的问题&#xff0c;下载地址放到文章下面 步骤&#xff0c;按顺序&#xff1a; 1、创建安装Oracle…
阅读更多...
万用表测接地电阻方法

万用表测接地电阻方法

万用表测接地电阻方法 用万用表在不同土质的土壤对接地电阻进行了实验&#xff0c;并将万用表所测数据和专用接地电阻测试仪所测数据进行了比较&#xff0c;两者十分接近。具体测量方法如下&#xff1a; 找两根8mm、1m长的圆钢&#xff0c;将其一端磨尖作为辅助测试棒&#x…
阅读更多...
Mysql之视图

Mysql之视图

Mysql之视图 常见的数据库对象视图概述为什么使用视图视图的理解创建视图创建单表视图别名的运用 创建多表联合视图利用视图对数据进行格式化contact 函数以视图为基&#xff0c;再创建新的视图 查看视图更新视图的数据一般情况不可更新的视图 修改和删除视图修改视图删除视图注…
阅读更多...
【C#】Visual Studio 2022 远程调试配置教程

【C#】Visual Studio 2022 远程调试配置教程

在某些特殊的情况下&#xff0c;开发机和调试机可能不是同一台设备&#xff0c;此时就需要远程调试了。 开发机配置 首先需要确保两台机器在同一局域网下。 创建共享文件夹 随便找个地方新建一个文件夹&#xff0c;用来放编译结果。例如我这里是 D:\DebuggingWorkspace\。 …
阅读更多...
什么是阿里云负载均衡SLB？

什么是阿里云负载均衡SLB？

目录 硬件或软件负载均衡的区别是什么&#xff1f; 什么是阿里云负载均衡SLB&#xff1f; 阿里云传统型负载均衡CLB 硬件或软件负载均衡的区别是什么&#xff1f; 通过专用硬件实现负载均衡&#xff0c;那么整体成本会较高&#xff0c;而且设备容易出现单点故障&#xff0c;…
阅读更多...
【MySQL】InnoDB和MyISAM区别

【MySQL】InnoDB和MyISAM区别

文章目录 一、索引不同1 InnoDB聚簇索引&#xff0c;MyISAM非聚簇索引1 InnoDB聚簇索引2 MyISAM非聚簇索引 2 InnoDB必须要有主键&#xff0c;MyISAM允许没有主键3 InnoDB支持外键4 InnoDB不支持全文索引5 索引保存位置不同 二、对事物的支持三、存储结构不同四、存储空间不同五…
阅读更多...
Elasticsearch中复制一个索引数据到新的索引中

Elasticsearch中复制一个索引数据到新的索引中

问题 我有时候&#xff0c;需要调试一个已经存在的ES索引&#xff0c;需要从已有的索引复制数据到新的索引中去。 解决 这里我借助一个GUI工具&#xff0c;来解决这个问题&#xff0c;底层它是使用Reindex的API实现索引数据复制的。 步骤 选中已存在的redix菜单&#xff0…
阅读更多...
00-Git 应用

00-Git 应用

Git 应用 一、Git概述 1.1 什么是Git git 是一个代码协同管理工具&#xff0c;也称之为代码版本控制工具&#xff0c;代码版本控制或管理的工具用的最多的&#xff1a; svn、 git。 SVN 是采用的 同步机制&#xff0c;即本地的代码版本和服务器的版本保持一致&#xff08;提…
阅读更多...
KEPServerEX 6 之【外篇-1】PTC-ThingWorx服务端软件安装 Tomcat10本地安装

KEPServerEX 6 之【外篇-1】PTC-ThingWorx服务端软件安装 Tomcat10本地安装

本文目标： 安装 Java 和 Apache Tomcat ，为ThingWorx安装做基础。 ----------------------------------------------------------------------- 安装重点 --------------------------------------------------------------------- 1. 安装 Java 11 / JDK 11 添加系…
阅读更多...
SSRF中Redis的利用

SSRF中Redis的利用

目录 1. SSRF 1.1 什么是SSRF 1.2 漏洞成因 1.3 可能会存在SSRF的地方 1.4 SSRF分类 1.5 验证方法 1.6 利用方式 1.7 可以利用的协议 1.8 SSRF过滤绕过 2. SSRF攻击Redis 2.1 环境搭建 2.2 漏洞复现(通过ssrf利用redis写入webshell) 2.2.1 想要写入webshell的两个…
阅读更多...
【unity学习笔记】4.场景切换

【unity学习笔记】4.场景切换

创建空物体→创建脚本挂载在空物体上→打开脚本 1.创建所需要的场景 assets中点击创建场景 2.文件→生成设置 3.将需要的场景拖入 4.场景跳转 创建空对象&#xff0c;将脚本放在空对象上。 注意两个类&#xff1a;场景类、场景管理类 void Start(){//场景跳转SceneManager.Lo…
阅读更多...
labelme目标检测数据类型转换

labelme目标检测数据类型转换

1. labelme数据类型 LabelMe是一个开源的在线图像标注工具&#xff0c;旨在帮助用户创建和标记图像数据集。它提供了一个用户友好的界面&#xff0c;让用户可以直观地在图像上绘制标记框、多边形、线条等&#xff0c;以标识和注释图像中的对象或区域。 GitHub&#xff1a;http…
阅读更多...
智能监控平台/视频共享融合系统EasyCVR海康设备国标GB28181接入流程

智能监控平台/视频共享融合系统EasyCVR海康设备国标GB28181接入流程

TSINGSEE青犀视频监控汇聚平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力&…
阅读更多...
C# 使用Pipelines处理Socket数据包

C# 使用Pipelines处理Socket数据包

写在前面 在上一篇中对Pipelines进行简单的了解&#xff0c;同时也留下了未解的问题&#xff0c;如何将Pipelines类库运用到Socket通讯过程中来解决粘包和分包。链接地址如下&#xff1a; 初识System.IO.Pipelines https://rjcql.blog.csdn.net/article/details/135211047 这…
阅读更多...
Hive安装笔记——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

Hive安装笔记——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

将下发的ds_db01.sql数据库文件放置mysql中 12、编写Scala代码&#xff0c;使用Spark将MySQL的ds_db01库中表user_info的全量数据抽取到Hive的ods库中表user_info。字段名称、类型不变&#xff0c;同时添加静态分区&#xff0c;分区字段为etl_date&#xff0c;类型为String&am…
阅读更多...
前端开发之通过vue-office组件实现文件预览

前端开发之通过vue-office组件实现文件预览

前端开发之通过vue-office组件实现文件预览 前言效果图docx文件xlsx文件pdf文件 vue中简单案例1、安装组件2、vue中代码 前言 在实现文件预览的时候我们可以通过vue-office组件来实现文件的预览效果 效果图 docx文件 xlsx文件 pdf文件 vue中简单案例 1、安装组件 整体安装…
阅读更多...
RabbitMQ入门指南(九)：消费者可靠性

RabbitMQ入门指南(九)：消费者可靠性

专栏导航 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、消费者确认机制 二、失败重试机制 三、失败处理策略 四、业务幂等性 1.通过唯一标识符保证操作的幂等性 2.通过业务判断保证操作的幂等性 总结 前言 RabbitMQ是一个高效、可靠的开源消息队列系…
阅读更多...
词表示：语言与计算的桥梁

词表示：语言与计算的桥梁

目录 前言1 什么是词表示2 独热表示3 上下文表示4 分布式表示结语 前言 在自然语言处理领域&#xff0c;词语的表示是一个基本挑战。将词语转换为计算机可以理解的符号&#xff0c;衡量词语之间的相似度&#xff0c;捕捉它们之间复杂的关系&#xff0c;是使机器能够理解和处理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023