【鸿蒙】HarmonyOS NEXT星河入门到实战6-组件化开发-样式结构重用常见组件

【鸿蒙】HarmonyOS NEXT星河入门到实战6-组件化开发-样式结构重用常见组件

news2024/11/13 9:27:56

目录

1、Swiper轮播组件

1.1 Swiper基本用法

1.2 Swiper的常见属性

1.3 Swiper的样式自定义

1.3.1 基本语法

1.3.2 案例小米有品

2、样式&结构重用

2.1 @Extend:扩展组件(样式、事件)

2.2 @Styles:抽取通用属性、事件

2.3 @Builder:自定义构建函数(结构、样式、事件)

3、滚动容器Scroll

3.1 Scroll 的核心用法

3.2 Scroll 的常见属性

3.3 Scroll 的控制器

3.4 Scroll 的事件

3.5 案例:京东案例实战

4、容器组件Tabs

4.1 Tabs 基本用法

4.2 Tabs 常用属性

4.3 滚动导航栏

4.4 自定义TabBar

4.4.1 基础结构

4.4.2 高亮切换

4.5 案例:小米有品底部Tabs

前言：组件化开发-样式结构重用&常见组件

1、Swiper轮播组件

1.1 Swiper基本用法



import window from '@ohos.window';
@Entry
@Component

struct Index {

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Swiper(){
        Text('1')
          .backgroundColor(Color.Yellow)
        Text('2')
          .backgroundColor(Color.Orange)
        Text('3')
          .backgroundColor(Color.Brown)
      }
      .width('100%').height(100)
      .margin({bottom: 5})

      Swiper(){
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))

      }
      .width('100%').height(150)

    }


  }
}

1.2 Swiper的常见属性



import window from '@ohos.window';
@Entry
@Component

struct Index {

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){    

      Swiper(){
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))

      }
      .loop(false) //是否开启循环  默认true，flase无法左滑到末页
      .autoPlay(true) //  自动播放 默认是false自动播放
      .invert(4000) // 播放间隔  默认3000
      .vertical(false) //纵向滑动轮播默认flase，true就是纵向
      .width('100%').height(150)

    }


  }
}

1.3 Swiper的样式自定义

1.3.1 基本语法



import window from '@ohos.window';
import { InterstitialDialogAction } from '@ohos.atomicservice.InterstitialDialogAction';

@Entry
@Component

struct Index {

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Swiper(){
        Text('1')
          .backgroundColor(Color.Yellow)
        Text('2')
          .backgroundColor(Color.Orange)
        Text('3')
          .backgroundColor(Color.Brown)
      }
      .width('100%').height(200)
      .margin({bottom: 5})
      // .indicator(true) //定制小圆点。默认false
      .indicator(
        Indicator.dot()
          .itemWidth(20)
          .itemHeight(20)
          .color(Color.Black)
          .selectedItemWidth(25)
          .selectedItemHeight(25)
          .selectedColor(Color.White)
      )

      Swiper(){
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))

      }
      .loop(false) //是否开启循环  默认true，flase无法左滑到末页
      .autoPlay(true) //  自动播放 默认是false自动播放
      .invert(4000) // 播放间隔  默认3000
      .vertical(false) //纵向滑动轮播默认flase，true就是纵向
      .width('100%').height(150)



    }


  }
}

1.3.2 案例小米有品



import window from '@ohos.window';
import { InterstitialDialogAction } from '@ohos.atomicservice.InterstitialDialogAction';

@Entry
@Component

struct Index {

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){


      Swiper(){
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))

      }
      .width('100%').aspectRatio(2.4) // 宽高比
      .autoPlay(true) //  自动播放 默认是false自动播放
      .invert(4000) // 播放间隔  默认3000
      .indicator(
        Indicator.dot()
          .itemWidth(10)
          .selectedItemWidth(30)
          .selectedColor(Color.Black)
      )


    }


  }
}

2、样式&结构重用

2.1 @Extend:扩展组件(样式、事件)

import window from '@ohos.window';

@Extend(Text)
function  textFn(){
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
}

@Extend(Text)
function bannerExtend(bgColor: ResourceColor, msg: string){
  .textAlign(TextAlign.Center)
  .backgroundColor(bgColor)
  .fontColor(Color.White)
  .fontSize(30)

  .onClick(() => {
    AlertDialog.show({
      message: msg
    })
  })
}

@Entry
@Component

struct Index {
  @State message: string = '@Extend-扩展组件(样式,事件)';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column() {
      Text(this.message)
        .textFn()
      Swiper() {
        Text('1')
          .bannerExtend(Color.Orange, '轮播图1号')
        Text('2')
          .bannerExtend(Color.Brown, '轮播图2号')
        Text('3')
          .bannerExtend(Color.Green, '轮播图3号')
      }
      .width('100%')
      .height(160)
    }
    .width('100%')
    .height('100%')


  }
}

2.2 @Styles:抽取通用属性、事件

下图有Text、Button、Column是无法使用Extend实现，那么需要学习Styles，Styles可以全局定义、可以在组件里面定义，但是不支持传参

import window from '@ohos.window';

// 1 全局定义
@Styles function commonStyles (){
  .width(100)
  .height(100)
}

@Entry
@Component

struct Index {
  @State message: string = '@styles';
  @State bgColor: ResourceColor = Color.Gray

  // 2、 组件内定义

  @Styles SetBg (){
    .backgroundColor(this.bgColor)
    .onClick(() => {
      this.bgColor = Color.Orange
    })
  }
  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .fontColor(Color.White)
        .commonStyles()
        .SetBg()


      Column() {}
      .commonStyles()
      .SetBg()


      Button('按钮')
        .commonStyles()
        .SetBg()

      Button('重置')
        .commonStyles()
        .onClick( () => {
          this.bgColor = Color.Gray
        })


    }
    .width('100%')
    .height('100%')


  }
}

2.3 @Builder:自定义构建函数(结构、样式、事件)

注意全局与局部区别（this.xxx）

import window from '@ohos.window';

// 1 全局定义
@Builder
function  navItem (icon: ResourceStr, txt: string){
  Column({ space: 10 }) {
    Image(icon)
      .width('80%')
    Text(txt)

  }
  .width('25%')
  .onClick(() => {
    AlertDialog.show({
      message: `点了 ${txt}`
    })
  })
}

@Entry
@Component

struct Index {
  @State message: string = '@Builder';

  // 2 局部定义
  @Builder
  navItem (icon: ResourceStr, txt: string){
  Column({ space: 10 }) {
    Image(icon)
      .width('80%')
    Text(txt)

  }
  .width('25%')
  .onClick(() => {
    AlertDialog.show({
      message: `点了 ${txt}`+ this.message
    })
  })
}

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column({ space: 20 }) {
      Text(this.message)
        .fontSize(30)

      Row() {
        Row() {
          navItem($r('app.media.ic_reuse_01'), '阿里拍卖')
          navItem($r('app.media.ic_reuse_02'), '菜鸟')
          this.navItem($r('app.media.ic_reuse_03'), '芭芭农场')
          this.navItem($r('app.media.ic_reuse_04'), '医药')

        }
      }
    }
    .width('100%')
    .height('100%')
  }

}

3、滚动容器Scroll

3.1 Scroll 的核心用法

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column() {
      // 如果需要滚动，外层
      Scroll(){
      Column({ space: 10 }) {
        ForEach(Array.from({ length: 10 }), (item: string, index) => {
          Text('测试文本' + (index + 1))
            .width('100%')
            .height(100)
            .textAlign(TextAlign.Center)
            .backgroundColor(Color.Orange)
            .fontSize(20)
            .fontColor(Color.White)
            .borderRadius(10)
        })
      }
      .padding(10)
      .width('100%')
      }
      .width('100%').height(400)
      .scrollable(ScrollDirection.Vertical) //    .scrollable(ScrollDirection.Horizontal)  //横向

    }

  }

}

3.2 Scroll 的常见属性

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column() {
      // 如果希望内容溢出, 能够滚动
      Scroll() {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('测试文本' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) // 设置滚动方向
      .scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滑动效果
    }
  }
}

3.3 Scroll 的控制器

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  // 1. 创建 Scroller 对象 (实例化)
  myScroll: Scroller = new Scroller()

  build() {
    Column() {
      // 如果希望内容溢出, 能够滚动
      // 2. 绑定给 Scroll 组件
      Scroll(this.myScroll) {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('测试文本' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) // 设置滚动方向
      .scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滑动效果

      Button('控制滚动条位置').margin(20)
        .onClick(() => {
          this.myScroll.scrollEdge(Edge.End)
        })
      Button('获取已经滚动的距离')
        .onClick(() => {
          const x = this.myScroll.currentOffset().xOffset
          const y = this.myScroll.currentOffset().yOffset
          AlertDialog.show({
            message: `x: ${x} y: ${y}`
          })
        })
    }
  }
}

3.4 Scroll 的事件

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  // 1. 创建 Scroller 对象 (实例化)
  myScroll: Scroller = new Scroller()

  build() {
    Column() {
      // 如果希望内容溢出, 能够滚动
      // 2. 绑定给 Scroll 组件
      Scroll(this.myScroll) {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('测试文本' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) // 设置滚动方向
      .scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滑动效果
      .onScroll((x, y) => {
        console.log('已经滑动的距离:', this.myScroll.currentOffset().yOffset)
      })


      Button('控制滚动条位置').margin(20)
        .onClick(() => {
          this.myScroll.scrollEdge(Edge.End)
        })
      Button('获取已经滚动的距离')
        .onClick(() => {
          const y = this.myScroll.currentOffset().yOffset
          AlertDialog.show({
            message: `y: ${y}`
          })
        })
    }
  }
}

3.5 案例:京东案例实战

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  // 1、 创建scroll实例对象
  myScroll: Scroller =  new Scroller()
  @State yOffset: number = 0

  build() {
    Column() {
      Stack({ alignContent: Alignment.BottomEnd }) {
        // 顶部滚动区域
        // 2 和Scroll容器绑定
        Scroll(this.myScroll) {
          Column() {
            Image($r('app.media.ic_jd_scroll_01'))
            Image($r('app.media.ic_jd_scroll_02'))
            Image($r('app.media.ic_jd_scroll_03'))
          }
        }
        .scrollBar(BarState.Off)
        .width('100%')
        .backgroundColor(Color.Orange)
        .onScroll( () => {
          this.yOffset = this.myScroll.currentOffset().yOffset
        })

        // 有时显示 有时隐藏-》条件渲染
        if( this.yOffset > 400){  Image($r('app.media.ic_jd_rocket'))
          .width(40)
          .backgroundColor(Color.White)
          .borderRadius(20)
          .padding(5)// .margin({right:20,bottom:20})
          .offset({ x: -20, y: -20 })
            // 3 添加事件
          .onClick( () => {
            this.myScroll.scrollEdge(Edge.Top)
          })
        }

      }
      .layoutWeight(1)

      // 底部 tabbar 图片(后面会学)
      Image($r('app.media.ic_jd_tab'))
        .width('100%')
    }
  }
}

4、容器组件Tabs

4.1 Tabs 基本用法

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }


  build() {
    Tabs(){
      TabContent(){
        Text('首页内容') // 只能有一个子组件
      }
      .tabBar('首页')

      TabContent(){
        Text('推荐内容')
      }
      .tabBar('推荐')

      TabContent(){
        Text('发现内容')
      }
      .tabBar('发现')

      TabContent(){
        Text('我的')
      }
      .tabBar('我的')


    }

  }
}

4.2 Tabs 常用属性

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }


  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('首页内容') // 有且只能一个子组件
      }
      .tabBar('首页') // 配置导航

      TabContent() {
        Text('推荐内容') // 有且只能一个子组件
      }
      .tabBar('推荐')

      TabContent() {
        Text('发现内容') // 有且只能一个子组件
      }
      .tabBar('发现')

      TabContent() {
        Text('我的内容') // 有且只能一个子组件
      }
      .tabBar('我的')
    }
    .vertical(false) // 调整导航水平或垂直
    .scrollable(false) // 是否开启手势滑动
    .animationDuration(0) // 点击滑动的动画时间
  }
}

4.3 滚动导航栏

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }


  titles: string[] = [
    '首页','关注','热门','军事','体育',
    '八卦','数码','财经','美食','旅行'
  ]
  build() {
    // 生成10个面板 → 10个小导航
    Tabs() {
      ForEach(this.titles, (item: string, index) => {
        TabContent() {
          Text(`${item}内容`)
        }
        .tabBar(item)
      })
    }
    // barMode属性, 可以实现滚动导航栏
    .barMode(BarMode.Scrollable)
  }
}

4.4 自定义TabBar

4.4.1 基础结构

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }


  @Builder
  myBuilder (title: string, img: ResourceStr) {
    Column() {
      Image(img)
        .width(30)
      Text(title)
    }
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('购物车内容')
      }
      .tabBar(this.myBuilder('购物车', $r('app.media.ic_tabbar_icon_2')))

      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.myBuilder('我的', $r('app.media.ic_tabbar_icon_3')))
    }
  }
}

4.4.2 高亮切换

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  // 准备状态, 存储激活的索引
  @State selectedIndex: number = 0

  @Builder
  myBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    // 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBar
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('购物车内容')
      }
      .tabBar(this.myBuilder(0, '购物车', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))

      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.myBuilder(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
    }
    .onChange((index: number) => {
      // console.log('激活的索引', index)
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}

4.5 案例:小米有品底部Tabs

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  // 准备状态, 存储激活的索引
  @State selectedIndex: number = 0

  @Builder
  myBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    // 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBar
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  @Builder
  centerBuilder () {
    Image($r('app.media.ic_reuse_02'))
      .width(40)
      .margin({ bottom: 10 })
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('首页内容')
      }
      .tabBar(this.myBuilder(0, '首页', $r('app.media.ic_tabbar_icon_0'), $r('app.media.ic_tabbar_icon_0_selected')))

      TabContent() {
        Text('分类内容')
      }
      .tabBar(this.myBuilder(1, '分类', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))

      // 特殊形状的Tab
      TabContent() {
        Text('活动内容')
      }
      .tabBar(this.centerBuilder())

      TabContent() {
        Text('购物车内容')
      }
      .tabBar(this.myBuilder(3, '购物车', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))

      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.myBuilder(4, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
    }
    .onChange((index: number) => {
      // console.log('激活的索引', index)
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}

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

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

相关文章

宝马销量崩了，自己作死拦都拦不住

宝马销量崩了，自己作死拦都拦不住

文 | AUTO芯球作者 | 雷慢什么叫有人欢喜有人忧？这就是啦： 问界M9五座版上市当天，宣布M9大定破了13万台， 另一边呢，宝马股票当天暴跌近10%， 原因是什么呢，是宝马的业绩预期降了&#xff0…

阅读更多...

把公文写得好准快，原来他们悄悄使用了这款工具……

把公文写得好准快，原来他们悄悄使用了这款工具……

在公文写作时，您可能面临着以下挑战： 1、材料要求高，需要全面掌握思想站位、时效性、文风表达、内容法定性、行为规范性、表达特定性。 2、要求理论功底强、精通专业知识、遣词造句精准、强抗压以及百科知识储备丰富。 3、老题新作构思难&…

阅读更多...

Spire.PDF for .NET【页面设置】演示：为 PDF 添加背景颜色或背景图像

Spire.PDF for .NET【页面设置】演示：为 PDF 添加背景颜色或背景图像

在 PDF 文档中，背景是指页面内容背后的整体视觉外观。背景可以是简单的纯色，也可以是您选择的图像。向 PDF 添加背景可以帮助您增加文档的视觉趣味，并提高可读性。在本文中，您将学习如何使用Spire.PDF for .NET以编程方式设置 PDF…

阅读更多...

固态继电器(SSR)：分步概述

固态继电器(SSR)：分步概述

固态继电器(SSR)已成为现代电气和电子控制系统中的重要组成部分。它们通过提供更快的切换速度、更长的使用寿命和更好的可靠性，为传统机电继电器(EMR)提供了更好的替代方案。本文将逐步探讨SSR的工作原理、主要特性、优势和实际应用。什么是固态继电器？…

阅读更多...

稳石机器人第四季度全员冲刺大会圆满落幕

稳石机器人第四季度全员冲刺大会圆满落幕

2024年已在挑战与机遇的交织中悄然流逝了八个月，在正式入秋之际，稳石机器人在深圳总部一楼召开了第四季度全员大会。本次大会以“携手共进，共创未来”为主题，旨在总结过去，规划未来，并激发团队为实现公司目…

阅读更多...

旅游网站设计与实现：SpringBoot技术手册

旅游网站设计与实现：SpringBoot技术手册

第三章系统分析开发一个系统首先要对系统进行分析，是开发者针对系统实际客户对软件应用的一个调查访问和研究，弄清用户对软件需求的具体要求，同时开发者还要对系统开发的经济和可技术上是否可行进行分析，并确定系统开发的成本和…

阅读更多...

一文读懂：如何将广告融入大型语言模型(LLM)输出

一文读懂：如何将广告融入大型语言模型(LLM)输出

本文是我翻译过来的，讨论了在线广告行业的现状以及如何将大型语言模型（LLM）应用于在线广告。原文请参见”阅读原文“。在2024年，预计全球媒体广告支出的69%将流向数字广告市场。这个数字预计到2029年将增长到79%。在Meta的2024…

阅读更多...

【Docker部署ELK】(7.15)

【Docker部署ELK】(7.15)

1、拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.15.0 docker pull docker.elastic.co/kibana/kibana:7.15.0 docker pull docker.elastic.co/logstash/logstash:7.15.02、配置文件（解压资源到D盘DOCKER目录下） 2.1 配置文件…

阅读更多...

工作日常（一） - Shell和Linux命令（1）文件类

工作日常（一） - Shell和Linux命令（1）文件类

一、文件类 1. ls | 列出文件和目录 2. cd | 切换目录 3. mkdir | 创建目录 4. rmdir | 删除空目录 5. du -sh * | 查看当前目录下各个文件的文件大小 6. wc -l 文件名 | 统计指定文件的内容行数 7. touch 文件名 | 创建文件 8. rm 文件名 | 删除文件 9. cp | 复制文件 10. m…

阅读更多...

Jwt、Filter、Interceptor

Jwt、Filter、Interceptor

目录 JWT(Json Web Token) jwt令牌组成应用场景生成令牌解析令牌登录实例 Filter过滤器 Filter Filter登录校验 Interceptor拦截器 Interceptor 拦截路径执行流程登录实例 JWT(Json Web Token) jwt令牌定义了一种简洁的、自包含的格式，…

阅读更多...

Numpy版本过高问题的解决办法

Numpy版本过高问题的解决办法

1、问题的产生在运行一个魔塔大模型程序的时候，提示Numpy的版本过高，如下图： 2、查看当前的Numpy版本利用pip show numpy查看Numpy的版本号： pip show numpy 3、卸载numpy pip uninstall numpy 4、安装1.24.3版本的numpy pi…

阅读更多...

掌握ChatGPT：高效利用AI助手

掌握ChatGPT：高效利用AI助手

2023 年 3 月 15 日，ChatGPT-4 的诞生标志着人类进入了一个全新的人机协作时代。这个时代就像一个混沌初开的新世界，而 ChatGPT 则是这个新世界里诞生的一个新物种。这个新物种的心智如同一个四五岁的小孩，在与它频繁互动中，人…

阅读更多...

网络安全宣传周 | 网安知识一图 Get！

网络安全宣传周 | 网安知识一图 Get！

阅读更多...

C++ 左值与右值浅谈

C++ 左值与右值浅谈

左值与右值序言概念左值和右值的划分理解右值引用常量左值引用与右值引用移动语义引用折叠完美转发参考资料序言虽然平常都算是了解左值，右值的用法，但是好记性不如烂笔头，记下来供大家评鉴，有错改错，有善赞善&a…

阅读更多...

Jmeter接口测试之常用断言

Jmeter接口测试之常用断言

在接口测试中，我们需要检查请求处理结果是否正确。当请求的响应状态码为200，是否表时接口功能正常呢？显然是不正确的。响应状态为200，只能表明服务处理了你的请求，同时进行了结果返回；但并不能代表处理的…

阅读更多...

机器学习--卷积神经网络（包括python实现）

机器学习--卷积神经网络（包括python实现）

卷积神经网络 1. 计算方法 （1）输入和输出channel 1时首先我们要知道channel是什么意思，顾名思义channel就是“通道”的意思qwq。我们来举个例子，在计算机视觉中，如果一张图片是黑白的，那么每个像素点都…

阅读更多...

微信小程序页面制作——婚礼邀请函（含代码）

微信小程序页面制作——婚礼邀请函（含代码）

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…

阅读更多...

windows下ardusub仿真

windows下ardusub仿真

接上篇：windows编译ardupilot源码教程执行以下命令。 #在ardusub根目录下执行下面命令 cd ./Tools/autotest./waf configure --debugpython sim_vehicle.py -v ArduCopter -f quad --console --map -D -L RATBeach 编译时间较长，之后会打开三个窗口。 …

阅读更多...

SpringBoot 整合酷狗获取下载音乐（需要自己账户）

程序员必备宝典https://tmxkj.top/#/ 在此声明，本内容仅供个人学习、研究或娱乐之用，严禁任何形式的商业用途。若您发现本内容被用于商业目的，请立即与我们联系，我们将删除原代码。我们尊重并保护所有原创作品的知识产权。为了营造一个健康、积极的网络环境，我们鼓励用户…

阅读更多...

故障诊断迁移学习项目DDC（保姆教程）

故障诊断迁移学习项目DDC（保姆教程）

本项目从零开始搭建深度领域混淆（Deep Domain Confusion，DDC）算法。项目包括加载CWRU轴承原始信号，信号处理、数据集制作，模型搭建，DDC域混淆算法设计、特征可视化，混淆矩阵等流程来帮助读者学习…

阅读更多...

推荐文章

最新文章