我使用HarmonyOs Next开发了b站的首页

1.实现效果展示： 

2.图标准备

我使用的是iconfont图标，下面为项目中所使用到的图标

3. 代码

（1）Index.ets：

import {InfoTop} from '../component/InfoTop'
import {InfoCenter} from '../component/InfoCenter'
import {InfoBottom} from '../component/InfoBottom'

@Entry
@Component
struct Index {

  @State currentPage:number = 0

  build(){
    Column() {
      InfoTop()

      InfoCenter()

      InfoBottom({selectCurrent:this.currentPage})
    }
    .width('100%')
    .height('100%')
  }
}

（2）InfoTop 组件：

import font from '@ohos.font';

@Component
export struct InfoTop {

  aboutToAppear():void{
    font.registerFont({
      familyName:'infoTop',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  build(){
    
    Column(){

      Row(){
        Image($r('app.media.avatar'))
          .height(48)
          .width(48)
          .borderRadius(24)
          .margin({right:18})

        //搜索框
        Row(){
          Text('\ue7d2')
            .fontFamily('infoTop')
            .fontSize(20)

          Text('HarmonyOS Next')
            .textOverflow({overflow:TextOverflow.Ellipsis})
            .maxLines(1)
            .layoutWeight(1)

        }.border({
          width:1
        })
        .height(40)
        .layoutWeight(1)
        .padding(10)
        .borderRadius(20)


        Text('\ue613')
          .fontFamily('infoTop')
          .fontSize(35)
          .margin({left:24,right:18})

        Text('\ue673')
          .fontFamily('infoTop')
          .fontSize(35)

      }
      .width('100%')



    }.padding(10)
    .width('100%')

  }
}

（3）InfoCenter组件：

import font from '@ohos.font';
import {HomeRecommend} from './HomeRecommend'
@Component
export struct InfoCenter {
  aboutToAppear():void{
    font.registerFont({
      familyName:'infoCenter',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  @State navTop:string[] = ['直播','推荐','热门','动画','影视','新征程']

  @State selectCurrent:number = 1 //默认为推荐页面

  @State swiperImg:Resource[] = [
    $r('app.media.swiper_phone_01'),
    $r('app.media.swiper_phone_03'),
    $r('app.media.swiper_phone_00')]

  @Builder
  tabNavBuilder(index:number){
    Text(this.navTop[index])
      .border({
        width:{bottom:this.selectCurrent==index?2:0},
        color:this.selectCurrent==index?'#ffec839a':Color.Black
      })
      .fontColor(this.selectCurrent==index ?'#ffec839a':Color.Black)

      .textOverflow({overflow:TextOverflow.Clip})
      .maxLines(1)
  }

  @Builder
  moreBuilder(){
    Column(){
      Text('\ue643')
        .fontFamily('infoCenter')
        .fontSize(20)
        .backgroundColor(Color.White)
    }

  }



  build(){


    Column() {
      Tabs({barPosition:BarPosition.Start}){
        ForEach(this.navTop,(item:string,index)=>{
          TabContent(){
            //内容

            HomeRecommend()

          }.tabBar(this.tabNavBuilder(index))


          if(index == this.navTop.length-1){
            TabContent(){
            }.tabBar(this.moreBuilder())

          }
        })


      }
      .onChange((index:number)=>{
        if(index == this.navTop.length){
          console.log('跳转页面')
          return;
        }

        this.selectCurrent = index

      })



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

InfoCenter中的HomeRecommend组件

import font from '@ohos.font';

interface   recommendData{
  img:Resource
  title:string
  username:string
}

@Component
export struct HomeRecommend{
  aboutToAppear():void{
    font.registerFont({
      familyName:'recommendChannel',
      familySrc:'/fonts/iconfont.ttf'
    })
  }

  @State recommendList:recommendData[] = [
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},
    {img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'}]




  build(){
    Column(){

      Swiper(){
        Image($r('app.media.harmonyOs'))
        Image($r('app.media.harmonyOs'))
        Image($r('app.media.harmonyOs'))

      }.width('100%')
      .height(200)
      .autoPlay(true)
      .interval(2000)
      .margin(10)
      .indicator(
       Indicator.dot()
        .itemWidth(10)
        .itemHeight(10)
        .color(Color.Gray)
        .selectedItemWidth(10)
        .selectedItemHeight(10)
        .selectedColor(Color.White)
      )



      List(){
        ForEach(this.recommendList,(item:recommendData,index)=>{
          ListItem(){
            Column(){
              Image(item.img)
                .width('100%')
                .borderRadius({topRight:10,topLeft:10})

              Text(item.title)
                .textOverflow({overflow:TextOverflow.Ellipsis})
                .maxLines(2)
                .width('100%')
                .padding(5)

              Row(){
                Row({space:15}){
                  Text('\ue665')
                    .fontFamily('recommendChannel')
                    .margin({left:11})
                    .fontSize(22)

                  Text(item.username)

                }

                Text('\ue75f')
                  .fontFamily('recommendChannel')


              }
              .margin({top:10})
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)

            }
            .backgroundColor(Color.White)
            .width('100%')

          }

        })

      }
      .padding(2)
      .lanes(2,15)


    }.backgroundColor('#ffefefef')
    .height('100%')
    .width('100%')

  }

}

（4）InfoBottom组件：

import font from '@ohos.font';

interface IBottomNav{
  title:string
  font:string
}

@Component
export struct InfoBottom{

  aboutToAppear():void{
    font.registerFont({
      familyName:'infoBottom',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  @Link selectCurrent:number

  @State bottomNav:IBottomNav[] = [
    { title:'首页',font:'\ue61f' },
    { title:'动态',font:'\ue625' },
    { title:'会员购',font:'\ue601' },
    { title:'我的',font:'\ue600' }]

  @State offsetNav:number = 0

  @Builder
  bottomNavBuilder(item:IBottomNav,index:number){
    Column(){
      Text(item.font)
        .fontFamily('infoBottom')
        .fontSize(40)
        //感觉图标1和图标2都有点细小，进行加粗
        .fontWeight(index == 0 || index == 1 ? FontWeight.Bold:FontWeight.Normal)
        .fontColor(this.selectCurrent == index ? '#fff162d2':Color.Black)

      Text(item.title)
        .fontColor(this.selectCurrent == index ? '#fff162d2':Color.Black)
    }
  }

  @Builder
  addBuilder(){
    Text('\ue696;')
      .fontFamily('infoBottom')
      .fontSize(60)
      .fontColor('#fff162d2')


  }



  build(){

    Column(){

      Tabs({barPosition:BarPosition.Start}){
        ForEach(this.bottomNav,(item:IBottomNav,index)=>{
          TabContent(){

          }
          .tabBar(this.bottomNavBuilder(item,index))


          //放在中间-1之后的第一位位置
          if(this.bottomNav.length/2 == index + 1){
            TabContent(){

            }
            .tabBar( this.addBuilder())

          }


        })

      }
      .animationDuration(0)
      .onChange((index:number)=>{
        if(index == this.bottomNav.length/2 ){
          //跳转上传页面
          return;
        }

        if(index > this.bottomNav.length/2 ){
          this.selectCurrent = index - 1
        }else{
          this.selectCurrent = index
        }


      })


    }.border({
      width:{top:1},
      style:BorderStyle.Dotted
    })
    .padding(5)
    .height(80)
    .width('100%')

  }
}

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

文章解读与仿真程序复现思路——太阳能学报EI\CSCD\北大核心《计及电-热-氢负荷与动态重构的主动配电网优化调度》

文章解读与仿真程序复现思路——太阳能学报EI\CSCD\北大核心《计及电-热-氢负荷与动态重构的主动配电网优化调度》

本专栏栏目提供文章与程序复现思路，具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
Linux 搭建 Kafka 环境 - 详细教程

Linux 搭建 Kafka 环境 - 详细教程

目录 一. Kafka介绍 1. 应用场景 2. 版本对比 二. Kafka安装 1. 前置环境 （1）安装JDK 2. 软件安装 （3）环境变量配置 （3）服务启动 三. Console测试 基础命令 （1）列出Kafk…
阅读更多...
PLC电源模块

PLC电源模块

PM电源模块 为CPU信号模块及 其他的扩展设备、其他用电设备（如传感器）提供工作供电 接线和开关 状态显示 灯的闪烁示意看手册 PS电源模块 为CPU信号模块及其他的扩展设备提供工作供电。PS(System Power Supply) 外形与PM电源模块类似，状…
阅读更多...
PLC【搭建服务端】

PLC【搭建服务端】

PLC搭建服务端 文章目录 PLC搭建服务端前言一、搭建PLC服务器二、打开ModSean32获取数据总结 前言 使用博图V16编写PLC搭建服务器，使用 ModSean32 读取其中数据 一、搭建PLC服务器 打开博图V16点击项目进行新建，编辑好项目名称、及项目路径&#xff0c…
阅读更多...
Netty 启动源码阅读

Netty 启动源码阅读

文章目录 1. 入门2. Netty 代码实例3. Netty bind3.1 initAndRegister3.1.1 newChannel, 创建 NioServerSocketChannel3.1.2 init(channel); 初始化 NioServerSocketChannel3.1.3 register 注册channel 3.2 doBind0 绑定端口3.3 ServerBootstrapAcceptor 1. 入门 主从Reactor模…
阅读更多...
MATLAB制作一个简单的函数绘制APP

MATLAB制作一个简单的函数绘制APP

制作一个函数绘制APP，输入函数以及左右端点，绘制出函数图像。 编写回调函数： 结果：
阅读更多...
HTML 【实用教程】（2024最新版）

HTML 【实用教程】（2024最新版）

核心思想 —— 语义化 【面试题】如何理解 HTML 语义化 ?仅通过标签便能判断内容的类型，特别是区分标题、段落、图片和表格 增加代码可读性，让人更容易读懂对SEO更加友好，让搜索引擎更容易读懂 html 文件的基本结构 html 文件的文件后缀为 …
阅读更多...
移动硬盘“需格式化”预警：专业数据恢复指南

移动硬盘“需格式化”预警：专业数据恢复指南

移动硬盘“需格式化”危机：了解背后的真相 在日常的数字生活中，移动硬盘作为我们存储重要数据的“保险箱”，其稳定性与安全性直接关系到我们信息的完整与便捷访问。然而，当您尝试打开移动硬盘时，屏幕上赫然出现的“需…
阅读更多...
科技赋能智慧应急：“数字孪生+无人机”在防汛救灾中的应用

科技赋能智慧应急：“数字孪生+无人机”在防汛救灾中的应用

近期，全国多地暴雨持续，“麻辣王子工厂停工”“水上派出所成水上的派出所了”等相关词条冲上热搜，让人们看到了全国各地城市内涝、洪涝带来的严重灾情。暴雨带来的影响可见一斑，潜在的洪水、泥石流、山体滑坡等地质灾害更应提高警…
阅读更多...
aardio —— 今日减bug

aardio —— 今日减bug

打字就减bug 鼠标双击也减bug 看看有多少bug够你减的 使用方法： 1、将资源附件解压缩，里面的文件夹，放到aardio\plugin\plugins 目录 2、aardio 启动插件 → 插件设置 → 选中“今日减bug” → 保存。 3、重启 aardio，等aa…
阅读更多...
BUUCTF[PWN][fastbin attack]

BUUCTF[PWN][fastbin attack]

fastbin_attack例题 题目：[BUUCTF在线评测 (buuoj.cn)](https://buuoj.cn/challenges#[ZJCTF 2019]EasyHeap) 整体思路：利用编辑时edit_heap函数的栈溢出漏洞，覆盖heaparray中的栈指针指向free的got表，将其改为system的plt表&…
阅读更多...
make工具

make工具

1、什么是make？ make是个命令，是个可执行程序，是个工具，用来解析Makefile文件的命令，这个命令存放在/usr/bin/目录下 -rwxr-xr-x 1 root root 250K 2月 15 2022 make -rwxr-xr-x 1 root root 4.8K 2月 15 2022 ma…
阅读更多...
Linux_实现简易日志系统

Linux_实现简易日志系统

目录 1、认识可变参数 2、解析可变参数 3、打印可变参数 3.1 va_list 3.2 va_start 3.3 va_arg 3.4 va_end 3.5 小结 4、实现日志 4.1 日志左半部分 4.2 日志右半部分 4.3 日志的存档归类 结语 前言： 在Linux下实现一个日志系统，该日…
阅读更多...
Open3D 删除点云中重叠的点（方法二）

Open3D 删除点云中重叠的点（方法二）

目录 一、概述 1.1原理 1.2应用 二、代码实现 三、实现效果 3.1原始点云 3.2处理后点云 3.3数据对比 一、概述 在点云处理中，重叠点（即重复点）可能会对数据分析和处理的结果产生负面影响。因此，删除重叠点是点云预处理中常…
阅读更多...
一招解决找不到d3dcompiler43.dll,无法继续执行代码问题

一招解决找不到d3dcompiler43.dll,无法继续执行代码问题

当您的电脑遇到d3dcompiler43.dll缺失问题时，首先需要了解d3dcompiler43.dll文件及其可能导致问题的原因，之后便可以选择合适的解决方案。在此，我们将会为您提供寻找d3dcompiler43.dll文件的多种处理方法。 一、d3dcompiler43.dll文件分析 d…
阅读更多...
【C++第十课 - stack_queue】stack、queue的使用、适配器模型stack、queue和priority_queue的底层实现、deque

【C++第十课 - stack_queue】stack、queue的使用、适配器模型stack、queue和priority_queue的底层实现、deque

目录 一、stack使用1、push2、pop3、empty4、top题目1、最小栈2、栈的压入、弹出序3、逆波兰表达式求值 二、queue的使用priority_queue习题 三、适配器stack的底层实现queue的底层实现priority_queue的底层实现仿函数/函数对象函数指针 四、deque 一、stack使用 stack是个容器…
阅读更多...
【74LS163做24进制计数器】2021-11-19

【74LS163做24进制计数器】2021-11-19

缘由用74LS163做24进制计数器-其他-CSDN问答,仿真multisim两个74LS163芯片如何构成47进制计数器-吐槽问答-CSDN问答 参考74ls163中文资料汇总（74ls163引脚图及功能_内部结构图及应用电路） - 电子发烧友网
阅读更多...
1.pwn的汇编基础（提及第一个溢出：整数溢出）

1.pwn的汇编基础（提及第一个溢出：整数溢出）

汇编掌握程度 能看懂就行，绝大多数情况不需要真正的编程(shellcode题除外) 其实有时候也不需要读汇编，ida F5 通常都是分析gadget，知道怎么用， 调试程序也不需要分析每一条汇编指令，单步执行然后查看寄存器状态即可 但…
阅读更多...
【Python机器学习】模型评估与改进——多分类指标

【Python机器学习】模型评估与改进——多分类指标

多分类问题的所有指标基本是上都来自于二分类问题，但是要对所有类别进行平均。多分类的精度被定义为正确分类的样本所占的比例。同样，如果类别是不平衡的，精度并不是很好的评估度量。 想象一个三分类问题，其中85%的数据点属于类别…
阅读更多...
Java（七）——多态

Java（七）——多态

个人简介 👀个人主页： 前端杂货铺 ⚡开源项目： rich-vue3 （基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL） 🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展 &#x1…
阅读更多...
最新文章

Copyright @ 2022~2023