网站建设基,网站模板在线演示怎么做,企业内训,网页制作入门项目介绍
本项目基于 HarmonyOS 的ArkUI框架TS扩展的声明式开发范式#xff0c;关于语法和概念直接看官网官方文档地址#xff1a;基于TS扩展的声明式开发范式#xff0c;
工具版本#xff1a; DevEco Studio 3.1 Canary1
SDK版本#xff1a; 3.1.9.7#xff08;API V…项目介绍
本项目基于 HarmonyOS 的ArkUI框架TS扩展的声明式开发范式关于语法和概念直接看官网官方文档地址基于TS扩展的声明式开发范式
工具版本 DevEco Studio 3.1 Canary1
SDK版本 3.1.9.7API Version 8 Release
效果演示 页面解析
主框架
使用容器组件Tabs 、TabContent、作为主框架底部Tab使用自定义布局样式设置点击事件每次点击更换选中的索引。来切换内容页面。
使用自定义组件来实现首页、分类、购物车、我的的搭建。
Entry
Component
struct MainFrame {State selectIndex: number 0private controller: TabsController new TabsController()private tabBar getTabBarList()// 内容Builder Content() {Tabs({ controller: this.controller }) {TabContent() {HomeComponent()}TabContent() {ClassifyComponent()}TabContent() {ShoppingCartComponent({ isShowLeft: false })}TabContent() {MyComponent()}}.width(100%).height(0).animationDuration(0).layoutWeight(1).scrollable(false).barWidth(0).barHeight(0)}// 底部导航Builder TabBar() {Row() {ForEach(this.tabBar, (item: TabBarModel, index) {Column() {Image(this.selectIndex index ? item.iconSelected : item.icon).width(23).height(23).margin({ right: index 2 ? 3 : 0 })Text(item.name).fontColor(this.selectIndex index ? #dc1c22 : #000000).margin({ left: 1, top: 2 })}.layoutWeight(1).onClick(() {this.selectIndex indexthis.controller.changeIndex(index)})}, item item.name)}.width(100%).height(50).shadow({ radius: 1, color: #e3e2e2, offsetY: -1 })}build() {Column() {this.Content()this.TabBar()}.width(100%).height(100%)}
}首页
因为顶部标题栏需要浮在内容之上所以根布局使用 容器组件Stack 内容布局最外层使用 容器组件Scroll 来实现滑动内容整体分为3部分
轮播图使用 容器组件Swiper菜单使用 容器组件Flex 、默认横向布局子布局宽度分为五等分设置Flex的参数wrap: FlexWrap.Wrap可实现自动换行。商品列表和菜单的实现方式一样只不过宽度是二等分
向下滑动时标题栏显示功能使用 容器组件Scroll 的属性方法onScroll来判断y轴方向的偏移量根据偏移量计算出比例改变标题栏的透明度。 以下是部分代码 Component
export struct HomeComponent {// 滑动的y偏移量private yTotalOffset 0// 标题栏透明度State titleBarOpacity: number 0// 轮播图列表private banners [$r(app.media.banner1), $r(app.media.banner2), $r(app.media.banner3),$r(app.media.banner4), $r(app.media.banner5), $r(app.media.banner6),]// 菜单列表private menuList getHomeMenuList()// 商品列表private goodsList: ArrayHomeGoodsModel getHomeGoodsList()// 轮播图Builder Banner() {...}// 菜单Builder Menu() {....}// 商品列表Builder GoodsList() {...}build() {Stack({ alignContent: Alignment.Top }) {Scroll() {Column() {this.Banner()this.Menu()this.GoodsList()}.backgroundColor(Color.White)}.scrollBar(BarState.Off).onScroll((xOffset, yOffset) {this.yTotalOffset yOffsetconst yTotalOffsetVP px2vp(this.yTotalOffset)// 轮播图高度 350const scale yTotalOffsetVP / 200this.titleBarOpacity scale})Row(){TitleBar({title: 首页,isShowLeft: false,isShowRight: true,rightImage: $r(app.media.search)})}.opacity(this.titleBarOpacity)}.width(100%).height(100%)}
}详情页
和首页类似根布局使用容器组件Stack内容布局最外层使用容器组件Scroll 来实现滑动。因为详情页有相同布局使用装饰器Builder来抽离公共布局。
向下滑动时标题栏显示功能原理和首页一样 以下是部分代码
import router from ohos.router;Entry
Component
struct GoodsDetail {....// 轮播图Builder Banner() {...}// 内容itemBuilder ContentItem(title: string, content: string, top1) {Row() {Text(title).fontSize(13).fontColor(#808080)Text(content).fontSize(13).margin({ left: 10 }).fontColor(#ff323232)Blank()Image($r(app.media.arrow)).width(12).height(18)}.width(100%).padding(13).backgroundColor(Color.White).margin({ top: top })}// 内容Builder Content() {...this.ContentItem(邮费, 满80包邮, 7)this.ContentItem(优惠, 减5元)this.ContentItem(规格, 山核桃坚果曲奇; x3, 7)this.ContentItem(配送, 北京市朝阳区大塔路33号)}// 评论Builder Comment() {...}// 商品参数itemBuilder GoodsParamItem(title: string, content: string) {Row() {Text(title).width(100).fontSize(13).fontColor(#808080)Text(content).fontSize(13).fontColor(#ff323232).layoutWeight(1).padding({ right: 20 })}.width(100%).padding({ top: 15 }).alignItems(VerticalAlign.Top)}// 商品参数Builder GoodsParam() {...}build() {Stack() {Scroll() {Column() {this.Banner()this.Content()this.Comment()this.GoodsParam()}}.scrollBar(BarState.Off).onScroll((xOffset, yOffset) {this.yTotalOffset yOffsetconst yTotalOffsetVP px2vp(this.yTotalOffset)// 轮播图高度 350const scale yTotalOffsetVP / 350this.titleBarBgTmOpacity 1 - scaleif (scale 0.4) {this.titleBarBgWhiteOpacity scale - 0.2} else {this.titleBarBgWhiteOpacity 0}})this.TopBottomOperateBar()}.width(100%).height(100%).backgroundColor(#F4F4F4)}
}分类
此页面很简单就是左右两个容器组件List、一个宽度30%一个宽度70%使用循环渲染组件ForEach来渲染列表。
以下是部分代码
Component
export struct ClassifyComponent {// 搜索Builder Search() {...}// 内容Builder Content() {Row() {// 左分类List() {...}.width(30%)// 右分类List({scroller:this.scroller}) {...}.width(70%)}.width(100%).layoutWeight(1).alignItems(VerticalAlign.Top)}build() {Column() {this.Search()this.Content()}.width(100%).height(100%).backgroundColor(Color.White)}
}购物车
此界面功能全选、单选、删除商品、更改商品的数量。当有商品选中右上角删除按钮显示。更改商品数量同步更新合计的总价格。
使用List组件来实现列表。数据数组使用装饰器State定义。数据更新必须是更改数组的项。 以下是部分代码
Component
export struct ShoppingCartComponent {...// 商品详情Builder GoodsItem(item: ShoppingCartModel, index: number) {...}build() {Column() {TitleBar()if (this.list.length 0) {// 列表 List() {...}.layoutWeight(1)// 结算布局Row() {...}} else {Row() {Text(空空如也~)}}}.width(100%).height(100%).backgroundColor(#F4F4F4)}selectOperation(item: ShoppingCartModel, index: number) {// 替换元素,才能更改数组这样页面才能更新let newItem {...item}newItem.isSelected !item.isSelectedthis.list.splice(index, 1, newItem)this.calculateTotalPrice()}// 加/减操作addOrSubtractOperation(item: ShoppingCartModel, index: number, type: -1 | 1) {...}// 计算合计calculateTotalPrice() {let total 0let selectedCount 0for (const item of this.list) {if (item.isSelected) {selectedCounttotal item.newPrice * item.count}}this.totalPrice totalthis.isAllSelected selectedCount this.list.length}
}结尾
此项目没有比较难的点都是照着官方文档查阅API做出来的依靠着声明式UI的简洁和强大页面搭建效率很高。
