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

news/2024/11/15 5:01:23/

以上效果，由四个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.ppmy.cn/news/1281685.html

相关文章

5.2 显示窗口的内容（二）

5.2 显示窗口的内容（二）

三，显示器几何形状管理 只有显示管理器被允许更改显示器的几何形状。窗口管理器也是显示管理器。 3.1 当显示器显示其自身内容时 当显示器显示其自身内容时，适用以下属性： 显示属性描述SCREEN_PROPERTY_PROTECTION_ENABLE表示显示目标窗口是否需要内容保护。只要显示器上…
阅读更多...
CentOS系统环境搭建（二十六）——使用nginx在无域名情况下使用免费证书设置https

CentOS系统环境搭建（二十六）——使用nginx在无域名情况下使用免费证书设置https

centos系统环境搭建专栏&#x1f517;点击跳转 文章目录 使用nginx在无域名情况下使用免费证书设置https1.获取SSL证书1.1 生成SSL密钥1.2 生成SSL证书1.3 重命名密钥文件 2.nginx配置https2.1 放证书2.2 修改nginx.conf文件2.2.1 将80端口重定向到4432.2.2 端口443配置ssl证书…
阅读更多...
二维码智慧门牌管理系统：提升社区管理智能化水平

二维码智慧门牌管理系统：提升社区管理智能化水平

文章目录 前言一、全方位信息录入与查询二、公安权限账户访问的公安大数据后台三、社区工作人员申请权限安装录入软件四、业主通过移动终端扫描标准地址二维码门牌自主申报录入五、系统的价值 前言 在数字化时代&#xff0c;社区管理面临着更新流动人口信息、准确录入六实相关…
阅读更多...
ubuntu18设置开机自启动

ubuntu18设置开机自启动

项目需求&#xff1a;机器人开机上电后工控机首先运行机械臂控制代码&#xff0c;再运行算法代码 1.终端执行以下代码 gnome-session-properties 2.设置开机自启动选项 在弹出界面点击添加&#xff0c;名称随便填&#xff0c;命令填入要启动的脚本&#xff0c;注释随便填。 …
阅读更多...
【Linux系统基础】（3）在Linux上部署运维监控Zabbix和Grafana

【Linux系统基础】（3）在Linux上部署运维监控Zabbix和Grafana

目录 运维监控Zabbix部署简介安装安装前准备 - Mysql安装Zabbix Server 和 Zabbix Agenta. 安装Zabbix yum库b. 安装Zabbix Server、前端、Agentc. 初始化Mysql数据库d. 为Zabbix Server配置数据库e. 配置Zabbix的PHP前端 配置zabbix 前端&#xff08;WEB UI&#xff09; 运维监…
阅读更多...
C# 抽象类与接口

C# 抽象类与接口

抽象类和接口是C#“封装、继承、多态”三大特性中比较重要的组成部分。抽象类和接口这两种类型用于完全不同的目的。抽象类主要用作对象的基类&#xff0c;贡献某些主要的特性&#xff0c;例如共同的目的和结构。接口则主要是用于类&#xff0c;为这些类去添加不同的方法&#…
阅读更多...
WPF StackPanel

WPF StackPanel

StackPanel是一个控件容器&#xff0c;它按照一个方向&#xff08;水平或垂直&#xff09;堆叠子元素&#xff0c;使得它们沿一个轴线对齐。你可以在StackPanel中放置其他控件&#xff0c;如按钮、标签、文本框、图片等等。这些控件的排列方式由StackPanel按照指定的方向自动确…
阅读更多...
jQuery: 整理5---删除元素和遍历元素

jQuery: 整理5---删除元素和遍历元素

1. 删除元素 span{color: white;padding: 8px;margin: 5px;float: left;}.green {background-color: green;}.blue {background-color: blue;}<span class"green">green</span><span class"blue">blue</span><span class"…
阅读更多...
最新文章

Copyright @ 2022~2023