HarmonyOS ArkUi Tabs+TabContent+List实现tab吸顶功能
Demo效果
@Entry
@Component
struct StickyNestedScroll {@State message: string = 'Hello World'@State arr: number[] = []scroller = new Scroller()@StyleslistCard() {.backgroundColor(Color.White).height(72).width("100%").borderRadius(12)}build() {Scroll(this.scroller) {Column() {Stack({ alignContent: Alignment.Top }) {Column() {}.height("200vp").width('100%').backgroundImage($r('app.media.icon_home_top'))// Text('吸顶').width('100%').height(40).backgroundColor(Color.Black).zIndex(999)}Tabs({ barPosition: BarPosition.Start }) {TabContent() {List({ space: 10 }) {ForEach(this.arr, (item: number) => {ListItem() {Text("item" + item).fontSize(16)}.listCard()}, (item: string) => item)}.width("100%").edgeEffect(EdgeEffect.Spring).nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})}.tabBar("Tab1")TabContent() {}.tabBar("Tab2")}.vertical(false).backgroundColor(Color.Brown).height("100%")}.width("100%")}.edgeEffect(EdgeEffect.Spring).friction(0.6).backgroundColor('#DCDCDC').scrollBar(BarState.Off).width('100%').height('100%')}aboutToAppear() {for (let i = 0; i < 30; i++) {this.arr.push(i)}}@BuildertestHead() {Text('吸顶').width('100%').height(40).backgroundColor(Color.Black).zIndex(999)}
}
项目实战效果图
- Tab:(企业统计)
@BuilderTabWidget() {Row() {Text('企业统计').fontColor($r('app.color.color303242')).fontSize(16).margin({ left: 12 })}.height('100%').width('calc(100% - 30vp)').borderRadius({ topLeft: 8, topRight: 8 }).backgroundColor(Color.White).margin({ left: 15, right: 15 }).onClick(() => {this.scroller.scrollTo({ xOffset: 0, yOffset: 2000 })})}
- 完整项目代码
仔细看代码里的注释
@Entry
@Component
export struct HomePage {@State curIndex: number = 0scroller: Scroller = new Scroller()@State currentOffset: number = 0;@StorageLink('systemBarHeight') systemBarHeight: number = 0@State topOpacity: number = 1;@State searchHint: string = '请输入企业名称';@State banner?: BannerBean = new BannerBean()@State protMarketBean?: ProspectMarketBean[] = new Array<ProspectMarketBean>()aboutToAppear(): void {}build() {Stack({ alignContent: Alignment.Top }) {Scroll(this.scroller) {Column() {Column() {// tab 企业统计上面的组件 这里省略 l里面没内容的话 可以设置固定高度测试// ....}.width('100%')Tabs({ barPosition: BarPosition.Start }) {TabContent() {// 注意注意: 这里是tab 企业统计下面的界面 这里要用listList({ space: 10 }) {ListItem() {Column() {HomeWebWidget()if (this.protMarketBean && this.protMarketBean.length > 0) {HomeEnterpriseLib({ protMarketBean: this.protMarketBean }).margin({ top: 10 })}}.width('100%')}}.width("100%").height('100%')// edgeEffect nestedScroll一定要设置.edgeEffect(EdgeEffect.Spring).nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})}.tabBar(this.TabWidget())}.barWidth('100%').barHeight(40).vertical(false).margin({ top: 10 })//60=搜索组件的高度 this.systemBarHeight= 状态栏的高度 这样吸顶才是刚好处于搜索组件下方 可自行调整.height(`calc(100% - ${60 + px2vp(this.systemBarHeight)}vp)`)}.width("100%").backgroundImage($r('app.media.icon_home_top')).backgroundImageSize({ width: '100%', height: '50%' })}.onScroll(() => {// 滚动监听 根据偏移量 顶部搜索栏的界面效果this.currentOffset = this.scroller.currentOffset().yOffset;// 根据偏移控制透明度this.topOpacity = (140 - this.currentOffset) / 140; 例}).edgeEffect(EdgeEffect.Spring).friction(0.6).backgroundColor('#F3F3F3').scrollBar(BarState.Off).width('100%').height('100%')// 滚动偏移量大于0时 显示顶部搜索if (this.currentOffset > 0) {this.SearchHeaderWidget()}}}@BuilderTabWidget() {Row() {Text('企业统计').fontColor($r('app.color.color303242')).fontSize(16).margin({ left: 12 })}.height('100%').width('calc(100% - 30vp)') .borderRadius({ topLeft: 8, topRight: 8 }).backgroundColor(Color.White).margin({ left: 15, right: 15 }).onClick(() => {this.scroller.scrollTo({ xOffset: 0, yOffset: 2000 })})}@BuilderSearchHeaderWidget() {Column() {Row() {Image($r('app.media.icon_search')).width(18).height(18).margin({ left: 15 })Text(this.searchHint).fontColor('#C6C9CF').fontSize(13).margin({ left: 8 })}.height(40).width('100%').backgroundColor(Color.White).borderRadius(50).onClick(() => {router.pushUrl({ url: RouterPath.SEARCH, params: { tabIndex: 1 } })}).margin({ top: px2vp(this.systemBarHeight) })}.backgroundColor('#0256FF').padding({ left: 15, right: 15, bottom: 10, top: 10 }).opacity(1 - this.topOpacity) // 顶部搜索组件的透明度}
}
相关文章:
HarmonyOS ArkUi Tabs+TabContent+List实现tab吸顶功能
Demo效果 Entry Component struct StickyNestedScroll {State message: string Hello WorldState arr: number[] []scroller new Scroller()StyleslistCard() {.backgroundColor(Color.White).height(72).width("100%").borderRadius(12)}build() {Scroll(this.sc…...
Hugging Face Accelerate 两个后端的故事:FSDP 与 DeepSpeed
社区中有两个流行的零冗余优化器 (Zero Redundancy Optimizer,ZeRO)算法实现,一个来自DeepSpeed,另一个来自PyTorch。Hugging FaceAccelerate对这两者都进行了集成并通过接口暴露出来,以供最终用户在训练/微调模型时自主选择其中之…...
TextField是用于在用户界面中输入文本的控件。它广泛应用于表单、搜索框、评论区等需要用户输入文字的场景
TextField是用于在用户界面中输入文本的控件。它广泛应用于表单、搜索框、评论区等需要用户输入文字的场景。以下是对TextField的详细解释,涵盖其各个方面的功能和属性。 基本属性 text 描述:TextField中当前显示的文本。用法:text: "示…...
MYSQL 四、mysql进阶 5(InnoDB数据存储结构)
一、数据库的存储结构:页 索引结构给我们提供了高效的索引方式,不过索引信息以及数据记录都是保存在文件上的,确切说时存储在页结构中,另一方面,索引是在存储引擎中实现的,Mysql服务器上的存储引擎负责对表…...
Spring企业开发核心框架-下
五、Spring AOP面向切面编程 1、场景设定和问题复现 ①准备AOP项目 项目名:Spring-aop-annotation ②声明接口 /*** - * / 运算的标准接口!*/ public interface Calculator { int add(int i, int j); int sub(int i, int j); int mul(int i, in…...
X射线底片焊缝缺陷检测
实现四种焊缝缺陷的检测和分割处理。...
直播的js代码debug解析找到protobuf消息的定义
我们都知道直播的弹幕消息是通过websocket发送的,而且是通过protobuf传输的,那么这里面传输了哪些内容,这个proto文件又要怎么定义?每个消息叫什么,消息里面又包含有哪些字段,每个字段又是什么类型…...
详细学习es6扩展运算符
ES6中的扩展运算符(Spread Operator)是一种非常方便的语法,主要用于将可迭代对象(比如数组、字符串等)展开成多个参数。以下是关于ES6扩展运算符的详细内容: 用法: 在数组字面量中展开数组&am…...
HEC-HMS水文模型教程
原文链接:HEC-HMS水文模型教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247607904&idx5&sn1a210328a3fc8f941b433674d8fe2c85&chksmfa826787cdf5ee91d01b6981ebd89deac3e350d747d0fec45ce2ef75d7cb8009341c6f55114d&token90645021…...
Spring Cloud LoadBalancer基础入门与应用实践
官网地址:https://docs.spring.io/spring-cloud-commons/reference/spring-cloud-commons/loadbalancer.html 【1】概述 Spring Cloud LoadBalancer是由SpringCloud官方提供的一个开源的、简单易用的客户端负载均衡器,它包含在SpringCloud-commons中用…...
layui在表格中嵌入上传按钮,并修改上传进度条
当需要在表格中添加上传文件按钮,并不需要弹出填写表单的框的时候,需要在layui中,用按钮触发文件选择 有一点需要说明的是,layui定义table并不是在定义的标签中渲染,而是在紧接着的标签中渲染,所以要获取实…...
14-10 AIGC 项目生命周期——第一阶段
生成式 AI 项目生命周期的整个过程类似于从范围、选择、调整和对齐/协调模型以及应用程序集成开始的顺序依赖过程。流程表明每个步骤都建立在前一步的基础上。有必要了解每个阶段对于项目的成功都至关重要。 下面的流程图重点介绍了生成式 AI 项目生命周期的第一阶段 1 — “范…...
经典小游戏(一)C实现——三子棋
switch(input){case 1:printf("三子棋\n");//这里先测试是否会执行成功break;case 0:printf("退出游戏\n");break;default :printf("选择错误,请重新选择!\n");break;}}while(input);//直到输入的结果为假,循环才会结束} …...
如何利用AI生成可视化图表(统计图、流程图、思维导图……)免代码一键绘制图表
由于目前的AI生成图表工具存在以下几个方面的问题: 大多AI图表平台是纯英文,对国内用户来说不够友好;部分平台在生成图表前仍需选择图表类型、配置项,操作繁琐;他们仍需一份规整的数据表格,需要人为对数据…...
Firefox 编译指南2024 Windows10-使用Git 管理您的Firefox(五)
1. 引言 在现代软件开发中,版本控制系统(VCS)是不可或缺的工具,它不仅帮助开发者有效管理代码的变化,还支持团队协作与项目管理。Mercurial 是一个高效且易用的分布式版本控制系统,其设计目标是简洁、快速…...
ubuntu 18 虚拟机安装(1)
ubuntu 18 虚拟机安装 ubuntu 18.04.6 Ubuntu 18.04.6 LTS (Bionic Beaver) https://releases.ubuntu.com/bionic/ 参考: 设置固定IP地址 https://blog.csdn.net/wowocpp/article/details/126160428 https://www.jianshu.com/p/1d133c0dec9d ubuntu-18.04.6-l…...
Github 上 Star 数最多的大模型应用基础服务 Dify 深度解读(一)
背景介绍 接触过大模型应用开发的研发同学应该都或多或少地听过 Dify 这个大模型应用基础服务,这个项目自从 2023 年上线以来,截止目前(2024-6)已经获得了 35k 多的 star,是目前大模型应用基础服务中最热门的项目之一…...
XStream导出xml文件
最终效果 pom依赖 <dependency><groupId>com.thoughtworks.xstream</groupId><artifactId>xstream</artifactId><version>1.4.11.1</version></dependency>代码 XStreamUtil 这个直接复制即可 import com.thoughtworks.xst…...
陪诊小程序搭建:构建便捷医疗陪诊服务的创新实践
在当今快节奏的社会,医疗服务与人们的生活息息相关。然而,在医疗体系中,患者往往面临着信息不对称、流程繁琐、陪伴需求得不到满足等问题。为了解决这些问题,我们提出了一种创新的解决方案——陪诊小程序,旨在为患者提…...
0139__TCP协议
全网最详细TCP参数讲解,再也不用担心没有面试机会了_tcp的参数-CSDN博客 TCP协议详解-腾讯云开发者社区-腾讯云 TCP-各种参数 - 简书...
突破百度网盘限速:从问题诊断到性能优化的实战全攻略
突破百度网盘限速:从问题诊断到性能优化的实战全攻略 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 问题诊断:揭开网盘下载的痛点图谱 场景引入&…...
第8篇 | 逻辑回归
逻辑回归虽然名字中包含"回归",但实际上是一种分类算法。它通过sigmoid函数将线性输出转换为概率,广泛用于二分类问题。本篇将详细介绍逻辑回归的原理、实现和应用。一、逻辑回归概述逻辑回归用于处理二分类问题,输出为样本属于某一…...
Save Image as Type:终极Chrome图片格式转换指南,三步快速解决网页图片格式不兼容难题
Save Image as Type:终极Chrome图片格式转换指南,三步快速解决网页图片格式不兼容难题 【免费下载链接】Save-Image-as-Type Save Image as Type is an chrome extension which add Save as PNG / JPG / WebP to the context menu of image. 项目地址:…...
macOS风格光标主题:从视觉革新到交互未来的全面探索
macOS风格光标主题:从视觉革新到交互未来的全面探索 【免费下载链接】apple_cursor Free & Open source macOS Cursors. 项目地址: https://gitcode.com/gh_mirrors/ap/apple_cursor 价值解析:重新定义数字交互的视觉语言 在当今多设备协同的…...
从音频生成到DNA分析:手把手带你用S4和Hyena搞定Transformer不擅长的那些长序列任务
从音频生成到DNA分析:手把手带你用S4和Hyena搞定Transformer不擅长的那些长序列任务 当我们需要处理长达数小时的音频波形、百万碱基对的DNA序列或整本小说级别的文本时,传统Transformer架构很快就会遇到计算瓶颈。本文将带您探索两种突破性的序列建模方…...
SeqGPT-560M惊艳效果:支持多值字段提取——同一段文本中识别全部手机号而非仅首个
SeqGPT-560M惊艳效果:支持多值字段提取——同一段文本中识别全部手机号而非仅首个 在信息爆炸的时代,我们每天都要处理海量的非结构化文本。无论是从一份简历里找出候选人的所有联系方式,还是从一份合同里提取所有涉及的金额和日期ÿ…...
s2-pro GPU显存优化实践:FP16推理+动态批处理降低30%显存占用
s2-pro GPU显存优化实践:FP16推理动态批处理降低30%显存占用 1. 引言 语音合成技术正在快速改变内容创作的方式,但专业级模型的显存占用问题一直困扰着开发者。Fish Audio开源的s2-pro作为专业级语音合成模型镜像,虽然提供了出色的音质和音…...
图像分割损失函数调参指南:如何用Focal Loss拯救你的小目标检测模型
图像分割损失函数调参指南:如何用Focal Loss拯救你的小目标检测模型 当你在处理卫星图像中的微小建筑物或显微图像里的稀有细胞时,是否经常遇到模型对前景目标"视而不见"的情况?传统交叉熵损失在面对这种极端类别不平衡时往往力不从…...
Nanbeige 4.1-3B赋能微信小程序:打造智能客服对话机器人
Nanbeige 4.1-3B赋能微信小程序:打造智能客服对话机器人 最近在帮一个做电商的朋友琢磨怎么优化他们的客服系统。他们每天要处理大量重复的咨询,比如“什么时候发货”、“怎么退换货”,人工客服忙得团团转,用户还得排队等。这让我…...
JPEXS Free Flash Decompiler技术文档贡献者名单:作者与编辑
JPEXS Free Flash Decompiler技术文档贡献者名单:作者与编辑 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的开源Flash反编译工具&…...
