鸿蒙的基本项目_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…
阅读更多...
Vue生命周期钩子函数

Vue生命周期钩子函数

生命周期钩子&#xff0c;生命周期函数&#xff0c;生命周期事件&#xff08;不同名称&#xff0c;同一含义&#xff09; 含义&#xff1a;在Vue组件从创建到销毁的整个过程中&#xff0c;在不同时间节点可以自动执行的函数 整个过程分为三个部分&#xff1a;创建阶段&#x…
阅读更多...
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…
阅读更多...
mybatis中的xml语法

mybatis中的xml语法

MyBatis 是一个半自动化的ORM（对象关系映射）框架。它通过 XML 或注解的方式将指令映射到数据库操作。在 MyBatis 中，XML 映射文件定义了数据库操作的细节。以下是 MyBatis XML 映射文件的详细语法。1. 基本结构 MyBatis 的 XML 映射文件包含以下几个基本元素： : 这是根元素…
阅读更多...
万用表测接地电阻方法

万用表测接地电阻方法

万用表测接地电阻方法 用万用表在不同土质的土壤对接地电阻进行了实验&#xff0c;并将万用表所测数据和专用接地电阻测试仪所测数据进行了比较&#xff0c;两者十分接近。具体测量方法如下&#xff1a; 找两根8mm、1m长的圆钢&#xff0c;将其一端磨尖作为辅助测试棒&#x…
阅读更多...
SQL备忘--Like/逻辑运算/Order By排序/Top N特殊处理备忘

SQL备忘--Like/逻辑运算/Order By排序/Top N特殊处理备忘

1. Like 模糊查询 基本语法 在where 条件中使用LIKE关键字进行匹配 WHERE c1 LIKE ‘%end’ //可以匹配到“friend”等单词 匹配模式 百分号&#xff08;%&#xff09;&#xff1a; 表示匹配零个或多个任意字符下划线&#xff08;_&#xff09;&#xff1a;表示匹配一个任意…
阅读更多...
电镀污水处理设备主要特点及工艺流程

电镀污水处理设备主要特点及工艺流程

诸城市鑫淼环保小编带大家了解一下电镀污水处理设备主要特点及工艺流程 常见的一体化污水处理设备工艺有化学工艺、物理工艺、生物工艺和电化学法等。 电镀厂污水处工艺一&#xff1a; 化学工艺法&#xff0c;是指采用化学氧化还原反应和沉淀反应&#xff0c;将电镀废水中有毒有…
阅读更多...
Mysql之视图

Mysql之视图

Mysql之视图 常见的数据库对象视图概述为什么使用视图视图的理解创建视图创建单表视图别名的运用 创建多表联合视图利用视图对数据进行格式化contact 函数以视图为基&#xff0c;再创建新的视图 查看视图更新视图的数据一般情况不可更新的视图 修改和删除视图修改视图删除视图注…
阅读更多...
MySQL查询当天本周上周本月上月季度今年的数据

MySQL查询当天本周上周本月上月季度今年的数据

1. 当日 select 字段 from 表名 where 时间字段 BETWEEN CONCAT(CURDATE(), 00:00:00) AND CONCAT(CURDATE(), 23:59:59); 2. 昨天 SELECT * FROM day_sell WHERE TO_DAYS(NOW()) - TO_DAYS(sell_time) < 1 3. 近七天 SELECT * FROM day_sell WHERE DATE_SUB(CURDATE()…
阅读更多...
【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…
阅读更多...
RKNN Toolkit Lite2 一键安装和测试，sh脚本

RKNN Toolkit Lite2 一键安装和测试，sh脚本

RKNN Toolkit Lite2 安装和测试教程 本教程旨在指导用户如何使用提供的shell脚本来安装和测试RKNN Toolkit Lite2&#xff0c;适用于需要在Linux系统上部署和测试AI模型的开发者。 简介 RKNN Toolkit Lite2是一个高效的AI模型转换和推理工具包&#xff0c;专为Rockchip NPU设…
阅读更多...
最新文章

Copyright @ 2022~2023