鸿蒙开发入门day10-组件导航

news2024/9/27 7:24:15

 (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ）

目录

 组件导航 (Navigation)

设置页面显示模式

设置标题栏模式

设置菜单栏

设置工具栏

路由操作

页面跳转

页面返回

页面替换

页面删除

参数获取

路由拦截

子页面

页面显示类型

页面生命周期

页面监听和查询

 组件导航 (Navigation)

Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。

在API Version 9上，需要配合NavRouter组件实现页面路由，从API Version 10开始，推荐使用NavPathStack实现页面路由。

设置页面显示模式

Navigation组件通过mode属性设置页面的显示模式。

自适应模式

Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。

Navigation() {
  ...
}
.mode(NavigationMode.Auto)

单页面模式

图1 单页面布局示意图

将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式。

Navigation() {
  ...
}
.mode(NavigationMode.Stack)

 

分栏模式

图2 分栏布局示意图

将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。

@Entry
@Component
struct NavigationExample {
  @State TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  private arr: number[] = [1, 2, 3];

  @Builder
  PageMap(name: string) {
    if (name === "NavDestinationTitle1") {
      pageOneTmp()
    } else if (name === "NavDestinationTitle2") {
      pageTwoTmp()
    } else if (name === "NavDestinationTitle3") {
      pageThreeTmp()
    }
  }

  build() {
    Column() {
      Navigation(this.pageInfos) {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item:string) => {
            ListItem() {
              Text("NavRouter" + item)
                .width("100%")
                .height(72)
                .backgroundColor('#FFFFFF')
                .borderRadius(24)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
                .onClick(()=>{
                  this.pageInfos.pushPath({ name: "NavDestinationTitle" + item})
                })
            }
          }, (item:string):string => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Split)
      .navDestination(this.PageMap)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp])
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

// PageOne.ets
@Component
export struct pageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  build() {
    NavDestination() {
      Column() {
        Text("NavDestinationContent1")
      }.width('100%').height('100%')
    }.title("NavDestinationTitle1")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
}

// PageTwo.ets
@Component
export struct pageTwoTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  build() {
    NavDestination() {
      Column() {
        Text("NavDestinationContent2")
      }.width('100%').height('100%')
    }.title("NavDestinationTitle2")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
}

// PageThree.ets
@Component
export struct pageThreeTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  build() {
    NavDestination() {
      Column() {
        Text("NavDestinationContent3")
      }.width('100%').height('100%')
    }.title("NavDestinationTitle3")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
}

设置标题栏模式

标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式。

Mini模式

普通型标题栏，用于一级页面不需要突出标题的场景。

图3 Mini模式标题栏

Navigation() {
  ...
}
.titleMode(NavigationTitleMode.Mini)

Full模式

强调型标题栏，用于一级页面需要突出标题的场景。

图4 Full模式标题栏

Navigation() {
  ...
}
.titleMode(NavigationTitleMode.Full)

设置菜单栏

菜单栏位于Navigation组件的右上角，开发者可以通过menus属性进行设置。menus支持Array<NavigationMenuItem>和CustomBuilder两种参数类型。使用Array<NavigationMenuItem>类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。

图5 设置了3个图标的菜单栏

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() {
  ...
}
.menus([TooTmp,
  TooTmp,
  TooTmp])

图片也可以引用resources中的资源。

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "resources/base/media/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() {
  ...
}
.menus([TooTmp,
  TooTmp,
  TooTmp])

图6 设置了4个图标的菜单栏

let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() {
  ...
}
.menus([TooTmp,
  TooTmp,
  TooTmp,
  TooTmp])

设置工具栏

工具栏位于Navigation组件的底部，开发者可以通过toolbarConfiguration属性进行设置。

图7 工具栏

let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
Navigation() {
  ...
}
.toolbarConfiguration(TooBar)

路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

从API version 12开始，页面栈允许被继承。开发者可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。具体示例代码参见：页面栈继承示例代码。

@Entry
@Component
struct Index {
  // 创建一个页面栈对象并传入Navigation
  pageStack: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pageStack) {
    }
    .title('Main')
  }
}

页面跳转

NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为以下三类:

普通跳转，通过页面的name去跳转，并可以携带param。

this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")

带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。

this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});

带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。

this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});

页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

页面替换

NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

路由拦截

NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象，该对象包含三个回调函数：

名称描述
willShow页面跳转前回调，允许操作栈，在当前跳转生效。
didShow页面跳转后回调，在该回调中操作栈会在下一次跳转生效。
modeChangeNavigation单双栏显示状态发生变更时触发该回调。

说明

无论是哪个回调，在进入回调时页面栈都已经发生了变化。

开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力。

this.pageStack.setInterception({
  willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
    operation: NavigationOperation, animated: boolean) => {
    if (typeof to === "string") {
      console.log("target page is navigation home page.");
      return;
    }
    // 将跳转到PageTwo的路由重定向到PageOne
    let target: NavDestinationContext = to as NavDestinationContext;
    if (target.pathInfo.name === 'PageTwo') {
      target.pathStack.pop();
      target.pathStack.pushPathByName('PageOne', null);
    }
  }
})

子页面

NavDestination是Navigation子页面的根容器，用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性，使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型，用于满足不同页面的诉求。

页面显示类型

  • 标准类型

    NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。

  • 弹窗类型

    NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期，两者可以同时显示。

页面生命周期

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的形式开放。

其生命周期大致可分为三类，自定义组件生命周期、通用组件生命周期和自有生命周期（其中aboutToAppear和aboutToDisappear是自定义组件的生命周期。如果NavDestination外层包含自定义组件时则存在；OnAppear和OnDisappear是组件的通用生命周期，剩下的六个生命周期为NavDestination独有）。

生命周期时序如下图所示：

  • aboutToAppear：在创建自定义组件后，执行其build()函数之前执行（NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
  • onWillAppear：NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效。
  • onAppear：通用生命周期事件，NavDestination组件挂载到组件树时执行。
  • onWillShow：NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。
  • onShown：NavDestination组件布局显示之后执行，此时页面已完成布局。
  • onWillHide：NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。
  • onHidden：NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
  • onWillDisappear：NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
  • onDisappear：通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。
  • aboutToDisappear：自定义组件析构销毁之前执行，不允许在该方法中改变状态变量。

页面监听和查询

为了方便组件跟页面解耦，在NavDestination子页面内部的自定义组件可以通过全局方法监听或查询到页面的一些状态信息。

页面信息查询

自定义组件提供queryNavDestinationInfo方法，可以在NavDestination内部查询到当前所属页面的信息，返回值为NavDestinationInfo，若查询不到则返回undefined。

 import { uiObserver } from '@kit.ArkUI';

 // NavDestination内的自定义组件
 @Component
 struct MyComponent {
   navDesInfo: uiObserver.NavDestinationInfo | undefined

   aboutToAppear(): void {
     this.navDesInfo = this.queryNavDestinationInfo();
   }

   build() {
       Column() {
         Text("所属页面Name: " + this.navDesInfo?.name)
       }.width('100%').height('100%')
   }
 }

页面状态监听

通过@ohos.arkui.observer提供的注册接口可以注册NavDestination生命周期变化的监听，使用方式如下：

uiObserver.on('navDestinationUpdate', (info) => {
     console.info('NavDestination state update', JSON.stringify(info));
 });

也可以注册页面切换的状态回调，能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo，并且提供了UIAbilityContext和UIContext不同范围的监听：

 // 在UIAbility中使用
 import { UIContext, uiObserver } from '@kit.ArkUI';

 // callBackFunc 是开发者定义的监听回调函数
 function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}
 uiObserver.on('navDestinationSwitch', this.context, callBackFunc);

 // 可以通过窗口的getUIContext()方法获取对应的UIContent
 uiContext: UIContext | null = null;
 uiObserver.on('navDestinationSwitch', this.uiContext, callBackFunc);

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

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

相关文章

论文降重切勿“本末倒置”！一文教你如何有效降重

论文降重切勿“本末倒置”！一文教你如何有效降重

【SciencePub学术】本期热点 论文降重 原创性是评价论文质量的重要标准之一。许多读者在撰写论文都担心重复率过高的问题。 本篇文章旨在分享有效降低学术论文重复率的策略&#xff0c;从而促进学术诚信&#xff0c;提高研究工作的创新性和学术价值。通过一系列实用的写作技巧…
阅读更多...
高可用集群keepalived 原理+实战

高可用集群keepalived 原理+实战

keepalived 1.高可用集群1.1简介1.2原理1.3 集群类型1.4实现高可用1.5VRRP&#xff1a;Virtual Router Redundancy Protocol1.5.1 VRRP 相关术语1.5.2VRRP 相关技术 2.实验2.1keepalived环境部署2.2抢占模式和非抢占模式2.2.1非抢占模式2.2.2抢占延迟模式 preempt_delay 2.3VIP…
阅读更多...
MATLAB 手动实现投影密度法分割建筑物立面 （73）

MATLAB 手动实现投影密度法分割建筑物立面 （73）

专栏文章往期回顾，包含本文章 MATLAB 手动实现投影密度法分割建筑物立面 （73） 一、算法介绍二、算法实现1.代码2.效果总结一、算法介绍 从原始点云中，自动分割提取建筑物立面点云用于立面绘图，可以减少人为操作流程。这里从0开始，手动实现一种基于投影密度法的建筑物立…
阅读更多...
Unity动画模块 之 3D模型导入基础设置Animation页签

Unity动画模块 之 3D模型导入基础设置Animation页签

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 基础设置就截图看看辣&#xff0c;只有实际应用中才会使用到&#xff0c;现在死记硬背也不可能记住 1.基础设置 笔记来…
阅读更多...
STM32常用C语言知识总结

STM32常用C语言知识总结

目录 一、引言 二、C 语言基础 1.数据类型 2.变量与常量 3.控制结构 4.数组与指针 5.字符串 6. extern变量声明 7.内存管理 三、STM32 中的 C 语言特性 1.位操作 2.寄存器操作 一、引言 STM32 作为一款广泛应用的微控制器&#xff0c;其开发离不开 C 语言的支持。C …
阅读更多...
编写日志文件

编写日志文件

精灵程序 #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/wait.h> #include <stdlib.h> #include <string.h> #include <errno.h> #include <fcntl.h> #include <sys/stat.h> #include…
阅读更多...
vue3 响应式 API：ref() 和 reactive()

vue3 响应式 API：ref() 和 reactive()

在 Vue 3 中&#xff0c;响应式系统是其核心特性之一&#xff0c;它使得数据的变化能够自动触发视图的更新。 官方文档&#xff1a; 响应式 API&#xff1a;核心 要更好地了解响应式 API&#xff0c;推荐阅读官方指南中的章节&#xff1a; 响应式基础 (with the API preference…
阅读更多...
【STM32单片机_(HAL库)】3-2-1【中断EXTI】【电动车报警器项目】震动点灯

【STM32单片机_(HAL库)】3-2-1【中断EXTI】【电动车报警器项目】震动点灯

1.硬件 STM32单片机最小系统LED灯模块震动传感器模块 2.软件 exti驱动文件添加GPIO常用函数中断配置流程main.c程序 #include "sys.h" #include "delay.h" #include "led.h" #include "exti.h"int main(void) {HAL_Init(); …
阅读更多...
Linux常用命令 ---- rmdir 命令[删除一个空目录]

Linux常用命令 ---- rmdir 命令[删除一个空目录]

rmdir 命令 功能&#xff1a;删除一个空目录 我们使用 mkdir 命令创建一个名为 test 空文件夹&#xff0c;如下图所示。 现在使用 rmdir 命令将 test 文件夹进行删除&#xff0c;如下图所示。 注意&#xff1a;rmdir 命令只能删除一个空目录&#xff0c;如果这个目录中有其他文…
阅读更多...
【云原生】Kubernetes中的名称空间和资源配额详细用法与应用实战

【云原生】Kubernetes中的名称空间和资源配额详细用法与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…
阅读更多...
医疗器械维修其实没有想的那么难

医疗器械维修其实没有想的那么难

在很多人的印象中&#xff0c;医疗器械维修是一项极其复杂且神秘的工作&#xff0c;似乎只有专业的技术精英才能胜任。然而&#xff0c;事实并非如此&#xff0c;医疗器械维修其实并没有想象中那么难。 首先&#xff0c;现代医疗器械的设计越来越注重人性化和可维护性。制造商…
阅读更多...
迎接开学新生活！高三开学必备物品推荐~

迎接开学新生活！高三开学必备物品推荐~

步入高三&#xff0c;意味着每一位学子都将面临人生中重要的转折点——高考。为了帮助高三学生们准备充分&#xff0c;让学习生活之路更加顺畅。今天小编综合了实用性、性价比以及学生需求的考量&#xff0c;精选了一系列必备物品&#xff0c;旨在为高三学生创造一个更为舒适、…
阅读更多...
ICMP互联网控制报文协议

ICMP互联网控制报文协议

ICMP 互联网控制报文协议 ICMP &#xff08; Internet Control Message Protocol &#xff0c;也就是互联⽹控制报⽂协议&#xff09;。 ⽹络包在复杂的⽹络传输环境⾥&#xff0c;常常会遇到各种问题。 当遇到问题的时候&#xff0c;总不能死个不明不⽩&#xff0c;没头没脑…
阅读更多...
4. kafka消息监控客户端工具

4. kafka消息监控客户端工具

KafkaKing官网地址 : https://github.com/Bronya0/Kafka-King github下载地址 : Releases Bronya0/Kafka-King (github.com) (windows、macos、linux版本) 云盘下载地址 : https://pan.baidu.com/s/1dzxTPYBcNjCTSsLuHc1TZw?pwd276i (仅windows版本) 连接kafka 输入本地地址…
阅读更多...
基于Java语言的私家车充电桩系统+私家车充电平台+充电桩系统项目

基于Java语言的私家车充电桩系统+私家车充电平台+充电桩系统项目

介绍 SpringBoot 框架&#xff0c;私家车充电桩平台充电桩系统充电平台充电桩云快充协议1.5-1.6协议新能源汽车二充电平台源码Java源码私家车充电系统 源码合作 提供无加密源代码和数据库&#xff0c;支持二次开发 SpringMVC架构完整充电桩系统源代码-充电桩系统-家充公充-新…
阅读更多...
大数据报表如何免费设计？本攻略附赠强大报表工具！

大数据报表如何免费设计？本攻略附赠强大报表工具！

在当今信息爆炸的时代&#xff0c;大数据跃升为企业战略决策的核心支撑点。如何有效地从浩瀚的数据海洋中精炼出富含洞察力的信息&#xff0c;并将其转化为直观易懂的报表&#xff0c;是每个数据分析师和决策者都需要面对的挑战。这需要掌握一定的技巧和经验&#xff0c;本文将…
阅读更多...
C语言03--控制流

C语言03--控制流

1.二路分支 逻辑&#xff1a;程序中某段代码需要在满足某个条件时才能运行形式&#xff1a; if 语句&#xff1a;表达一种 如果-则 的条件执行关系if-else 语句&#xff1a;表达一种 如果-否则 的互斥分支关系 语法&#xff1a; if ( 判断表达式 ) { // 代码块 } 解…
阅读更多...
大学生最佳就业城市排行榜出炉！

大学生最佳就业城市排行榜出炉！

最佳就业城市 随着秋招陆续开始&#xff0c;不少高校毕业生迎来了人生转折点。 其中一个需要重点考虑的点&#xff0c;是要前往哪座城市作为就业第一站。 不妨参考一下就业蓝皮书的统计数据&#xff1a; 可以发现&#xff0c;一线城市的就业人数正逐步减少&#xff0c;"新…
阅读更多...
grid-template-columns: 1.833333rem 1fr；

grid-template-columns: 1.833333rem 1fr；

问: grid-template-columns: 1.833333rem 1fr;这是什么属性? 回答: grid-template-columns: 1.833333rem 1fr; 定义了一个网格布局的列宽&#xff1a; 1.833333rem 表示第一列的宽度是相对于根元素字体大小的固定宽度, 1fr 是一个灵活单位&#xff0c;表示第二列会占据网…
阅读更多...
【吊打面试官系列-Memcached面试题】memcached 最大的优势是什么？

【吊打面试官系列-Memcached面试题】memcached 最大的优势是什么？

大家好&#xff0c;我是锋哥。今天分享关于 【memcached 最大的优势是什么&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; memcached 最大的优势是什么&#xff1f; Memcached 最大的好处就是它带来了极佳的水平可扩展性&#xff0c;特别是在一个巨大的系统中。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023