网页制作模板保存_网页怎么制作链接_刷粉网站推广免费_班级优化大师是干什么用的

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(){}
}

待完善中。。。。。。