基础ArkTS组件：导航栏组件（HarmonyOS学习第三课【3.8】）

news2024/11/29 8:45:08

官方文献

Navigation 组件一般作为页面布局的根容器，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。 Navigation 除了提供了默认的展示样式属性外，它还提供了 CustomBuilder 模式来自定义展示样式

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。从API Version 9开始，推荐与NavRouter组件搭配使用。

接口

Navigation()

属性

除支持通用属性外，还支持以下属性：

名称

参数类型

描述

title

string | CustomBuilder8+ | NavigationCommonTitle9+ | NavigationCustomTitle9+

页面标题。

subTitledeprecated

string

页面副标题。从API Version 9开始废弃，建议使用title代替。

menus

Array<NavigationMenuItem> | CustomBuilder8+

页面右上角菜单。使用Array<NavigationMenuItem> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。

titleMode

NavigationTitleMode

页面标题栏显示模式。

默认值：NavigationTitleMode.Free

toolBar

object | CustomBuilder8+

设置工具栏内容。

items: 工具栏所有项。

说明：

items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。

hideToolBar

boolean

隐藏工具栏。

默认值：false

true: 隐藏工具栏。

false: 显示工具栏。

hideTitleBar

boolean

隐藏标题栏。

默认值：false

true: 隐藏标题栏。

false: 显示标题栏。

hideBackButton

boolean

隐藏返回键。不支持隐藏NavDestination组件标题栏中的返回图标。

默认值：false

true: 隐藏返回键。

false: 显示返回键。

说明：

返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。

navBarWidth9+

Length

导航栏宽度。

默认值：200vp

单位：vp

说明：

仅在Navigation组件分栏时生效。

navBarPosition9+

NavBarPosition

导航栏位置。

默认值：NavBarPosition.Start

说明：

仅在Navigation组件分栏时生效。

mode9+

NavigationMode

导航栏的显示模式。

默认值：NavigationMode.Auto

自适应：基于组件宽度自适应单栏和双栏。

backButtonIcon9+

string | PixelMap | Resource

设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。

hideNavBar9+

boolean

是否显示导航栏（仅在mode为NavigationMode.Split时生效）。

NavigationMenuItem类型说明

名称

类型

必填

描述

value

string

是

菜单栏单个选项的显示文本。

icon

string

否

菜单栏单个选项的图标资源路径。

action

() => void

否

当前选项被选中的事件回调。

object类型说明

名称

类型

必填

描述

value

string

是

工具栏单个选项的显示文本。

icon

string

否

工具栏单个选项的图标资源路径。

action

() => void

否

当前选项被选中的事件回调。

NavigationTitleMode枚举说明

名称

描述

Free

当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。

Mini

固定为小标题模式。

Full

固定为大标题模式。

NavigationCommonTitle类型说明

名称

类型

必填

描述

main

string

是

设置主标题。

sub

string

是

设置副标题。

NavigationCustomTitle类型说明

名称

类型

必填

描述

builder

CustomBuilder

是

设置标题栏内容。

height

TitleHeight | Length

是

设置标题栏高度。

NavBarPosition枚举说明

名称

描述

Start

双栏显示时，主列在主轴方向首部。

End

双栏显示时，主列在主轴方向尾部。

NavigationMode枚举说明

名称

描述

Stack

导航栏与内容区独立显示，相当于两个页面。

Split

导航栏与内容区分两栏显示。

Auto

窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。

TitleHeight枚举说明

名称

描述

MainOnly

只有主标题时标题栏的推荐高度（56vp）。

MainWithSub

同时有主标题和副标题时标题栏的推荐高度（82vp）。

说明

目前可滚动组件只支持List。

事件

名称

功能描述

onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)

当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

onNavBarStateChange(callback: (isVisible: boolean) => void)

导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。

 内容比较多我将用简单易懂的话来进行说明，并且精炼其中内容。

Navigation定义介绍

interface NavigationInterface {
  (): NavigationAttribute;
}
Mini模式

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

Navigation 的定义不需要传递相关参数，我们先看下 Navigation 的最简单样例：

                                 

代码示例：

@Entry
@Component
struct Index {

  build() {
    Navigation() {              // Navigation只能包含一个子组件
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .width('100%')
        .height('100%')
        .backgroundColor('#aabbcc')
    }
    .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
    .titleMode(NavigationTitleMode.Mini)   //设置标题模式
    .title('主标题')   
  }
}
Full模式

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

                             

 代码示例：

@Entry
@Component
struct Index {

  build() {
    Navigation() {              // Navigation只能包含一个子组件
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .width('100%')
        .height('100%')
        .backgroundColor('#aabbcc')
    }
    .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
    .titleMode(NavigationTitleMode.Full)   //设置标题模式
    .title('主标题')   
  }
}

Navigation属性介绍

declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
  title(value: string | CustomBuilder): NavigationAttribute;
  subTitle(value: string): NavigationAttribute;
  hideTitleBar(value: boolean): NavigationAttribute;
  hideBackButton(value: boolean): NavigationAttribute;
  titleMode(value: NavigationTitleMode): NavigationAttribute;
  menus(value: Array<NavigationMenuItem> | CustomBuilder): NavigationAttribute;
  toolBar(value: object | CustomBuilder): NavigationAttribute;
  hideToolBar(value: boolean): NavigationAttribute;
  onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
}

title：设置导航栏的标题

当参数类型为 string 时，可以直接设置标题，但样式不支修改；当参数为 CustomBuilder 时，可以自定义标题样式。

  • 参数类型为 string ，简单样例如下所示：

    @Entry
@Component
struct Index {

  build() {
    Navigation() {              // Navigation只能包含一个子组件
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .width('100%')
        .height('100%')
        .backgroundColor('#aabbcc')
    }
    .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
    .titleMode(NavigationTitleMode.Full)//设置标题模式
    .title('主标题')     //标题栏内容
  }
}

    样例运行结果如下图所示：                                                              

  • 参数类型为 CustomBuilder ，简单样例如下所示：

    @Entry
@Component
struct ComponentTest {
  @Builder title() { // 通过Builder自定义标题栏，可以灵活的设置标题样式
    Row() {
      Text('Builder标题')
        .fontSize(20)
    }
    .width('100%')
    .height(55)
    .backgroundColor(Color.Pink)
  }

  build() {
    Navigation() {
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .size({ width: '100%', height: '100%' })
        .backgroundColor('#aabbcc')
    }
    .size({ width: '100%', height: '100%' })
    .title(this.title()) // 使用自定义的标题栏
    .titleMode(NavigationTitleMode.Mini)//设置标题模式
  }
}

    样例运行结果如下图所示：

subTitle：设置页面的副标题

  • 简单样例如下所示：

    @Entry
@Component
struct ComponentTest {
  @Builder title() { // 通过Builder自定义标题栏，可以灵活的设置标题样式
    Row() {
      Text('Builder标题')
        .fontSize(20)
    }
    .width('100%')
    .height(55)
    .backgroundColor(Color.Pink)
  }

  build() {
    Navigation() {
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .size({ width: '100%', height: '100%' })
        .backgroundColor('#aabbcc')
    }
    .size({ width: '100%', height: '100%' })
    .title(this.title()) // 使用自定义的标题栏
    .subTitle("副标题")
    .titleMode(NavigationTitleMode.Mini)//设置标题模式
  }
}

    样例运行结果如下图所示：

hideBackButton：是否隐藏返回按钮

  • 默认情况下不隐藏，简单样例如下所示：

    @Entry
@Component
struct ComponentTest {
  @Builder title() { // 通过Builder自定义标题栏，可以灵活的设置标题样式
    Row() {
      Text('Builder标题')
        .fontSize(20)
    }
    .width('100%')
    .height(55)
    .backgroundColor(Color.Pink)
  }

  build() {
    Navigation() {
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .size({ width: '100%', height: '100%' })
        .backgroundColor('#aabbcc')
    }
    .size({ width: '100%', height: '100%' })
    .title(this.title()) // 使用自定义的标题栏
    .subTitle("副标题")
    .titleMode(NavigationTitleMode.Mini)//设置标题模式
    .hideBackButton(true)
  }
}

    样例运行结果如下图所示：

toolBar：设置工具栏

  • 当参数类型为 object 时，可以直接设置工具栏选项，但样式不支修改；当参数为 CustomBuilder 时，可以自定义标题栏。

    • 当参数为 object 类型时，参数需要按照如下格式定义：

      • value：工具栏单个选项的显示文本。
      • icon：工具栏单个选项的图标资源路径。
      • action：当前选项被选中时的事件回调。
@Entry
@Component
struct Index {
  build() {
    Navigation() {              // Navigation只能包含一个子组件
      Text('title')
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .width('100%')
        .height('100%')
        .backgroundColor('#aabbcc')
    }
    .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
    .titleMode(NavigationTitleMode.Mini)//设置标题模式
    .title('主标题')     //标题栏内容
    .toolBar({items:[
      {value: "func", icon: "./icon/ic_public_community_messages.png", action: ()=>{}},
      {value: "func", icon: "../../resources/base/media/icon.png", action: ()=>{}},
      {value: "func", icon: $r("app.media.icon"), action: ()=>{}}]})
  }
}

当参数为 CustomBuilder 类型

可以自定义样式，简单样例如下所示

@Entry
@Component
struct ComponentTest {
  @State index: number = 0; // 选项卡下标，默认为第一个

  @Builder toolbar() { // 通过builder自定义toolbar
    Row() {
      Column() {
        Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
          .size({ width: 25, height: 25 })
        Text('消息')
          .fontSize(16)
          .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 0;
      })

      Column() {
        Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
          .size({ width: 25, height: 25 })
        Text('联系人')
          .fontSize(16)
          .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 1;
      })

      Column() {
        Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
          .size({ width: 25, height: 25 })
        Text('动态')
          .fontSize(16)
          .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 2;
      })
    }
    .width('100%')
    .height(60)
  }

  build() {
    Navigation() {
      Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态")
        .textAlign(TextAlign.Center)
        .fontSize(30)
        .size({ width: '100%', height: '100%' })
        .backgroundColor('#aabbcc')
    }
    .size({ width: '100%', height: '100%' })
    .title("标题栏")
    .toolBar(this.toolbar())
  }
}

hideTitleBar、hideToolBar

设置是否显示或者隐藏标题栏、工具栏，简单样例如下所示：

@Entry
@Component
struct ComponentTest {
  @State index: number = 0;
  @State hideToolBar: boolean = false;
  @State hideTitleBar: boolean = false;

  @Builder toolbar() {
    Row() {
      Column() {
        Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
          .size({ width: 25, height: 25 })
        Text('消息')
          .fontSize(16)
          .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 0;
      })

      Column() {
        Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
          .size({ width: 25, height: 25 })
        Text('联系人')
          .fontSize(16)
          .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 1;
      })

      Column() {
        Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
          .size({ width: 25, height: 25 })
        Text('动态')
          .fontSize(16)
          .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 2;
      })
    }
    .width('100%')
    .height(60)
  }

  build() {
    Navigation() {
      Column({ space: 10 }) {
        Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态")
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
          .onClick(() => {
            this.hideTitleBar = !this.hideTitleBar;
          })


        Button(this.hideToolBar ? "显示ToolBar" : "隐藏ToolBar")
          .onClick(() => {
            this.hideToolBar = !this.hideToolBar;
          })
      }
      .backgroundColor('#aabbcc')
      .size({ width: '100%', height: '100%' })
    }
    .size({ width: '100%', height: '100%' })
    .title("标题栏")
    .toolBar(this.toolbar())
    .hideToolBar(this.hideToolBar)
    .hideTitleBar(this.hideTitleBar)
  }
}

 

设置菜单栏

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

menus：设置标题栏右上角的菜单项，当参数为 CustomBuilder 时可以自定义菜单项。

  • 当参数为 NavigationMenuItem 数组时，参数说明如下：

    • value：菜单项的显示文本。
    • icon：菜单项的显示图标路径。
    • action：点击菜单项的事件回调。

简单样例如下所示：

@Entry
@Component
struct ComponentTest {
  @State index: number = 0;
  @State hideToolBar: boolean = false;
  @State hideTitleBar: boolean = false;

  @Builder toolbar() {
    Row() {
      Column() {
        Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
          .size({ width: 25, height: 25 })
        Text('消息')
          .fontSize(16)
          .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 0;
      })

      Column() {
        Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
          .size({ width: 25, height: 25 })
        Text('联系人')
          .fontSize(16)
          .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 1;
      })

      Column() {
        Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
          .size({ width: 25, height: 25 })
        Text('动态')
          .fontSize(16)
          .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 2;
      })
    }
    .width('100%')
    .height(60)
  }

  build() {
    Navigation() {
      Column({ space: 10 }) {
        Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态")
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
          .onClick(() => {
            this.hideTitleBar = !this.hideTitleBar;
          })


        Button(this.hideToolBar ? "显示ToolBar" : "隐藏ToolBar")
          .onClick(() => {
            this.hideToolBar = !this.hideToolBar;
          })
      }
      .backgroundColor('#aabbcc')
      .size({ width: '100%', height: '100%' })
    }
    .size({ width: '100%', height: '100%' })
    .title("标题栏")
    .toolBar(this.toolbar())
    .hideToolBar(this.hideToolBar)
    .hideTitleBar(this.hideTitleBar)
    .menus([
      {
        value: "搜索",
        icon: "pages/icon_search.png",
        action: () => {
          Prompt.showToast({ message: "搜索" })
        }
      },
      {
        value: "扫码",
        icon: "pages/icon_scan.png",
        action: () => {
          Prompt.showToast({ message: "扫码" })
        }
      }
    ])
  }
}

 

Navigation事件介绍

declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
  onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
}
  • onTitleModeChange：当 titleMode 为 NavigationTitleMode.Free 时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调

NavRouter

分享

添加收藏

导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

必须包含两个子组件，其中第二个子组件必须为NavDestination。

说明

子组件个数异常时：

  1. 有且仅有1个时，触发路由到NavDestination的能力失效。
  2. 有且仅有1个时，且使用NavDestination场景下，不进行路由。
  3. 大于2个时，后续的子组件不显示。
  4. 第二个子组件不为NavDestination时，触发路由功能失效。

接口

NavRouter()

事件

名称

功能描述

onStateChange(callback: (isActivated: boolean) => void)

组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。

说明：

开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。

示例

// xxx.ets
@Entry
@Component
struct NavRouterExample {
  @State isActiveWLAN: boolean = false
  @State isActiveBluetooth: boolean = false

  build() {
    Column() {
      Navigation() {
        NavRouter() {
          Row() {
            Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
            Text(`WLAN`)
              .fontSize(22)
              .fontWeight(500)
              .textAlign(TextAlign.Center)
          }
          .width('90%')
          .height(72)
          NavDestination() {
            Flex({ direction: FlexDirection.Row }) {
              Text('未找到可用WLAN').fontSize(30).padding({ left: 15 })
            }
          }.hideTitleBar(false).backgroundColor('#0c182431')
        }.backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff')
        .borderRadius(24)
        .onStateChange((isActivated: boolean) => {
          this.isActiveWLAN = isActivated
        })

        NavRouter() {
          Row() {
            Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
            Text(`蓝牙`)
              .fontSize(22)
              .fontWeight(500)
              .textAlign(TextAlign.Center)
          }
          .width('90%')
          .height(72)

          NavDestination() {
            Flex({ direction: FlexDirection.Row }) {
              Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 })
            }
          }.hideTitleBar(false).backgroundColor('#0c182431')
        }.backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff')
        .borderRadius(24)
        .onStateChange((isActivated: boolean) => {
          this.isActiveBluetooth = isActivated
        })
      }
      .title('设置')
      .titleMode(NavigationTitleMode.Free)
      .mode(NavigationMode.Auto)
      .hideTitleBar(false)
      .hideToolBar(true)
    }.height('100%')
  }
}

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

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

相关文章

【Python贪吃蛇】：编码技巧与游戏设计的完美结合

【Python贪吃蛇】：编码技巧与游戏设计的完美结合

文章目录 &#x1f525;一、运行效果&#x1f4a5;二、游戏教程✈1. 导入模块❤️2. 初始化游戏元素☔3. 改变蛇移动的方向&#x1f44a;4. 绘制方块&#x1f680;5. 检查蛇头是否在游戏区域内&#x1f308;6. 定义蛇的移动函数&#x1f3ac;7. 绑定键盘事件 ⭐三、完整代码 &a…
阅读更多...
让墨水屏成为生产力工具，文石做对了什么

让墨水屏成为生产力工具，文石做对了什么

文 | 螳螂观察 作者 | 青玥 众所周知&#xff0c;如今&#xff0c;我们的生活中大部分时间都被“屏幕”占据&#xff0c;这一承载着交互与显示功能的介质&#xff0c;出现在我们的手机、平板、汽车等产品上&#xff0c;吞没着我们的工作与生活。 而屏幕的长时间使用势必会对…
阅读更多...
Hive Sampling 抽样函数

Hive Sampling 抽样函数

Hive Sampling 抽样函数 1.random随机抽样 2.数据块抽样 3.分桶表抽样
阅读更多...
追剧必不可少，益百分艾护轻松解决眼疲劳！

追剧必不可少，益百分艾护轻松解决眼疲劳！

追剧必不可少&#xff0c;益百分艾护轻松解决眼疲劳! 追剧大军已经成为了当下社会一个不可忽视的群体&#xff0c;上到七八十岁的老年人&#xff0c;下到三四岁的孩童&#xff0c;每天大部分的时间都在追剧。而中间这一部分年轻人更是如此&#xff0c;因此我国近视眼的数量也是…
阅读更多...
webpack5以下的项目，前端引入node的path模块需要额外配置

webpack5以下的项目，前端引入node的path模块需要额外配置

webpack5以下的项目&#xff0c;前端import * as path from path时需要额外配置&#xff0c;这里以vue.config.js为例 刚开始引入时报错 其实就是在打包前端项目的时候&#xff0c;将path模块替换成 path-browserify 模块&#xff0c;所以还需要安装 path-browserfify 模块 …
阅读更多...
CSS 之 圆形波浪进度条效果

CSS 之 圆形波浪进度条效果

一、简介 ​ 本篇博客讲述了如何实现一个圆形波浪进度条的样式效果&#xff0c;具体效果参考下方GIF图。该样式的加载进度条可以用在页面跳转或数据处理等情况下的加载动画&#xff0c;比起普通的横条进度条来说&#xff0c;样式效果更生动美观。 实现思路&#xff1a; ​ 这…
阅读更多...
未来已来！这三款数字孪生产品你不能错过

未来已来！这三款数字孪生产品你不能错过

随着科技的不断进步&#xff0c;数字孪生技术已经逐渐渗透到我们生活的各个领域。数字孪生&#xff0c;简而言之&#xff0c;就是在虚拟世界中构建一个与物理世界相对应的数字模型&#xff0c;通过实时数据采集和分析&#xff0c;为各种行业和领域提供更高效、更精确的决策支持…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （258）-- 算法导论19.3 1题

文心一言 VS 讯飞星火 VS chatgpt （258）-- 算法导论19.3 1题

一、假定斐波那契堆中一个根 x 被标记了。解释 x 是如何成为一个被标记的根的。试说明 x 是否被标记对分析并没有影响&#xff0c;即使它不是一个先被链接到另一个结点&#xff0c;后又丢失了个孩子的根。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 斐波那契…
阅读更多...
金蝶云星空和旺店通·企业奇门单据接口对接

金蝶云星空和旺店通·企业奇门单据接口对接

金蝶云星空和旺店通企业奇门单据接口对接 接通系统&#xff1a;旺店通企业奇门 慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xff0c;先后布局流量获取、会员管理、仓库管理等其他重要经营模块。慧策的产品线从旺…
阅读更多...
【最新整理】大佬都在用的10款3DMax插件推荐！

【最新整理】大佬都在用的10款3DMax插件推荐！

3DMax大佬是怎样练成的&#xff1f;猫有猫道&#xff0c;狗有狗道&#xff0c;不说也许你不知道。手巧不如家什妙&#xff0c;熟练使用各种插件已经成了大佬们的标配&#xff0c;今天&#xff0c;小编就给大家盘点一下最新整理的10款爆火3DMax插件&#xff0c;这些插件不仅能够…
阅读更多...
等保三级需要什么安全产品？

等保三级需要什么安全产品？

等保三级&#xff0c;即信息安全等级保护三级&#xff0c;是中国对信息系统安全等级保护的一个标准。实现等保三级要求&#xff0c;需要部署一系列安全产品来加强信息系统的安全性。以下是等保三级通常需要的安全产品及其作用概述&#xff1a; 防火墙&#xff1a;作为网络安全的…
阅读更多...
Electron下复用窗口关闭、最小化和最大化按钮

Electron下复用窗口关闭、最小化和最大化按钮

在macOS下&#xff0c;创建窗口时设置&#xff1a; new BrowserWindow({titleBarStyle: hidden, // 关闭默认的titlebartrafficLightPosition: { x: 18, y: 18 }, // 交通灯距离窗口左侧和窗口上侧的像素距离 })效果&#xff1a; 在window下可以这样设置&#xff0c; new Br…
阅读更多...
拥抱数字化转型，解锁企业新质生产力的无限可能

拥抱数字化转型，解锁企业新质生产力的无限可能

新质生产力是推动社会进步的强大动力&#xff0c;而数字化转型则是释放这种生产力的关键。通过拥抱数字化转型&#xff0c;企业可以解锁新质生产力的无限可能&#xff0c;从而在激烈的市场竞争中脱颖而出。” 企业为什么要数字化转型&#xff1f; 新质生产力&#xff0c;这一…
阅读更多...
华为ensp中路由器IPSec VPN原理及配置命令(超详解)

华为ensp中路由器IPSec VPN原理及配置命令(超详解)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月13日2点11分 虚拟专用网络&#xff08;VPN&#xff09;是一种通过公用网络建立安全连接的技术。它可以使您的设备看起来像是连接到另一个网络&#xff0c;例如公司…
阅读更多...
MySQL动态列转行

MySQL动态列转行

介绍​​ 在实际的数据库查询中&#xff0c;有时候我们需要将表中的动态列&#xff08;即列数不固定&#xff09;转换为行&#xff0c;以便更好地进行数据分析和展示。在MySQL中&#xff0c;可以通过使用一些技巧和函数来实现动态列转行的功能。本文将介绍怎么实现MySQL动态列…
阅读更多...
沃比得 DP12A 对数周期天线 100MHz～2GHz

沃比得 DP12A 对数周期天线 100MHz～2GHz

产品概述 DP12A 对数周期天线该天线可用做超短波发射或接收天线&#xff0c;工作频率为 100MHz&#xff5e;2GHz。 具有频带宽&#xff0c;性能可靠&#xff0c;增益高等优点&#xff0c;是理想的无线电频谱管理、EMC 测试、电子对抗等领 域的定向接收、发射天线。 应用领域…
阅读更多...
Transformers 加速的一些常用技巧

Transformers 加速的一些常用技巧

Transformers 是一个强大的架构&#xff0c;但模型因其采用的自注意力机制&#xff0c;虽然能够有效地处理序列数据并捕获长距离依赖关系&#xff0c;但同时也容易导致在训练过程中出现OOM&#xff08;Out of Memory&#xff0c;内存不足&#xff09;或者达到GPU的运行时限制。…
阅读更多...
防爆巡检手持终端在燃气巡检作业中的应用

防爆巡检手持终端在燃气巡检作业中的应用

在燃气巡检作业中&#xff0c;安全始终是首要考虑的因素。面对易燃易爆的燃气环境&#xff0c;传统的巡检方式已经难以满足现代安全管理的需求。随着科技的不断进步&#xff0c;防爆巡检手持终端应运而生&#xff0c;成为燃气巡检作业的得力助手。这些终端不仅具备高度的防爆性…
阅读更多...
介绍适用于 Node.js 的 Elastic OpenTelemetry 发行版

介绍适用于 Node.js 的 Elastic OpenTelemetry 发行版

作者&#xff1a;来自 Elastic Trent Mick 我们很高兴地宣布推出 Elastic OpenTelemetry Distribution for Node.js 的 alpha 版本。 该发行版是 OpenTelemetry Node.js SDK 的轻量级包装&#xff0c;可以让你更轻松地开始使用 OpenTelemetry 来观察 Node.js 应用程序。 背景 …
阅读更多...
RiPro主题美化【支付弹窗底部提示语根据入口不同有不同的提示】ritheme主题美化RiProV2 增加支付提示语，按支付类型不同,入口不同提示语不同的设置

RiPro主题美化【支付弹窗底部提示语根据入口不同有不同的提示】ritheme主题美化RiProV2 增加支付提示语，按支付类型不同,入口不同提示语不同的设置

RiPro主题美化【支付弹窗底部提示语根据入口不同有不同的提示】ritheme主题美化RiProV2 增加支付提示语，按支付类型不同,入口不同提示语不同的设置 背景： 接上文：https://www.uu2id.com/827.html 付费组件在以下几个地方会弹出：1）文章隐藏内容付费；2）付费资源下载；3…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023