wordpress多域名更改,云南seo简单整站优化,龙岗企业网站制作公司,百度网站前面的图片序言#xff1a;
本文详细讲解了关于我们在页面上经常看到的可滚动页面和导航栏在鸿蒙开发中如何用Scroll和Tabs组件实现#xff0c;介绍了Scroll和Tabs的基本用法与属性。
笔者也是跟着B站黑马的课程一步步学习#xff0c;学习的过程中添加部分自己的想法整理为笔记分享出…序言
本文详细讲解了关于我们在页面上经常看到的可滚动页面和导航栏在鸿蒙开发中如何用Scroll和Tabs组件实现介绍了Scroll和Tabs的基本用法与属性。
笔者也是跟着B站黑马的课程一步步学习学习的过程中添加部分自己的想法整理为笔记分享出来如有代码错误或笔误欢迎指正。
B站黑马的课程链接鸿蒙课程介绍_哔哩哔哩_bilibili
往期笔记
【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础
【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布附QQ登陆、得物、京东登陆综合案例代码
【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局弹性/层叠方式与界面开发综合附飞狗卡片B站卡片案例实战开发支付宝界面代码
【04】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs进阶运算符状态管理附综合案例美团购物车
【05】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-条件渲染if/switch判断与for/while循环附计数器、京东加购案例【06】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-综合案例·生肖抽奖卡具体实现类似支付宝集五福【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式结构重用
目录
一.滚动容器Scroll
1.Scroll-核心用法
2.Scroll-常见属性
3.Scroll-控制器
4.Scroll-事件
5.Scroll-京东案例
二.Tabs组件
1.Tabs-基本使用
2.Tabs-自定义TabBar-基础结构
3.Tabs-自定义TabBar-高亮切换 一.滚动容器Scroll
简介当子组件的布局尺寸超出Scroll的尺寸时内容可以滚动
1.Scroll-核心用法
1用法说明
①Scroll设置尺寸
②设置溢出的子组件只支持一个子组件
③滚动方向支持横向和纵向默认纵向
2代码示意 build() {Scroll(){//只支持一个子组件Column(){//内容放在内部//尺寸超过Scroll即可滚动}}.width(100%).height(200).scrollable(ScrollDirection.xxx)//设置滚动方向}
//.scrollable(ScrollDirection.Vertical) 纵向
//.scrollable(ScrollDirection.Horizontal)横向 2.Scroll-常见属性
1常用参数 名称 参数类型 描述 scrollBar BarState 设置滚动条状态 scrollBarColor string|number|Color 设置滚动条颜色 scrollBarWidth string|number 设置滚动条宽度 edgeEffect value:EdgeEffect 设置边缘滑动效果 EdgeEffect.None 无 EdgeEffect.Spring 弹簧 EdgeEffect.Fade 阴影 scrollable ScrollDirection 设置滚动方向 ScrollDirection.Vertical) 纵向 ScrollDirection.Horizontal)横向
2代码示意 build() {Column() {Scroll() {Column() {ForEach(Array.from({ length: 10 }), (item: string, index) {Text(测试文本).width(100%).height(100).backgroundColor(Color.Grey).margin(20)})}.padding(10).width(100%)}.width(100%).height(400).scrollable(ScrollDirection.Vertical) //设置滚动方向.scrollBar(BarState.On) //On令滚动条恒存在 Off恒隐藏 Auto滑动显示.scrollBarColor(Color.Blue) //滚动条颜色.scrollBarWidth(5) //滚动条宽度.edgeEffect(EdgeEffect.Spring) //滚动条弹簧效果}} 3.Scroll-控制器
1核心步骤
①实例化Scroll的控制器
②绑定给Scroll组件
③控制器的方法控制滚动控制其属性获取滚动距离
2代码示意 struct Index {//1.创建Scroller对象实例化myscroller:Scroller new Scroller()build() {Column({ space: 10 }) {Scroll(this.myscroller) {Column() {ForEach(Array.from({ length: 10 }), (irem: string, index) {Text(测试文本).width(100%).height(100).backgroundColor(Color.Grey).margin(20)})}.padding(10).width(100%)}.width(100%).height(400).scrollable(ScrollDirection.Vertical) //设置滚动方向.scrollBar(BarState.On) //On令滚动条恒存在 Off恒隐藏 Auto滑动显示.scrollBarColor(Color.Blue) //滚动条颜色.scrollBarWidth(5) //滚动条宽度.edgeEffect(EdgeEffect.Spring) //滚动条弹簧效果Button(控制滚动条位置).margin(20).onClick((){this.myscroller.scrollEdge(Edge.Top) //控制滚动条到顶部})Button(获取已经滚动的距离).onClick((){const y this.myscroller.currentOffset().yOffsetAlertDialog.show({message:y:${y}})})}}
}
4.Scroll-事件
简介Scroll组件提供了一些事件让开发者可以在适当的时候添加逻辑。 Scroll(){//内容略}.onScroll((x,y)){//滚动时 一直触发//可以结合 scroller的currentOffset方案获取滚动距离} 1代码示意 Scroll(this.myscroller) {Column() {ForEach(Array.from({ length: 10 }), (irem: string, index) {Text(测试文本).width(100%).height(100).backgroundColor(Color.Grey).margin(20)})}.padding(10).width(100%)}.width(100%).height(400).scrollable(ScrollDirection.Vertical) //设置滚动方向.scrollBar(BarState.On) //On令滚动条恒存在 Off恒隐藏 Auto滑动显示.scrollBarColor(Color.Blue) //滚动条颜色.scrollBarWidth(5) //滚动条宽度.edgeEffect(EdgeEffect.Spring) //滚动条弹簧效果.onScroll((x,y){console.log(已经滑动的距离,this.myscroller.currentOffset().yOffset)}) 5.Scroll-京东案例
1代码示意 Entry
Component
struct Index {//1.创建Scroll实例对象myscroller:Scroller new Scroller()State yOffset:number 0 //实时保存y轴距离build() {Column() {Stack({ alignContent: Alignment.BottomEnd }) {// 顶部滚动区域//2.和scroller容器绑定Scroll(this.myscroller) {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.yOffsetthis.myscroller.currentOffset().yOffset})//有时显示有时隐藏可以用条件渲染if(this.yOffset400)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 }).onClick((){this.myscroller.scrollEdge(Edge.Top)})}.layoutWeight(1)// 底部 tabbar 图片(后面会学)Image($r(app.media.ic_jd_tab)).width(100%)}}
} 二.Tabs组件
当页面内容较多时可以通过Tabs组件进行分类展示
Tab里面还可以有Tab
1.Tabs-基本使用
1基本用法 Tabs(){TabContent(){Text(首页内容) //有且只能有一个子组件如果内容比较复杂可以用Column这种}.tabBar(首页) //配置导航TabContent(){Text(推荐内容) //有且只能有一个子组件如果内容比较复杂可以用Column这种}.tabBar(推荐) //配置导航TabContent(){Text(发现内容) //有且只能有一个子组件如果内容比较复杂可以用Column这种}.tabBar(发现) //配置导航TabContent(){Text(我的) //有且只能有一个子组件如果内容比较复杂可以用Column这种}.tabBar(我的) //配置导航}
2常用属性 名称 作用 barPosition 调整位置 开头 或 结尾 参数 vertical 调整导航 水平 或 垂直 scrollable 调整是否手势滑动 切换 animationDuration 点击滑动动画时间
①写法位置
3滚动导航栏
如果导航栏的内容较多屏幕无法容纳时可以将它设置为滚动
可以通过Tabs组件的barMode属性即可调整固定导航栏或滚动导航栏
①代码示意 tieles:string[][首页,关注,热门,军事,体育,八卦,数码,财经,美食,旅行,]//生成十个面板十个小导航Tabs(){ForEach(this.tieles,(item:string,index){TabContent(){Text(我是内容)}.tabBar(${item}内容)})}.barMode(BarMode.Scrollable)
2.Tabs-自定义TabBar-基础结构
TabBar在底部一般会显示图形和文字甚至有一些特殊logo
1代码示意
Entry
Component
struct Index {BuildermyBuilder(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)))}}
}
3.Tabs-自定义TabBar-高亮切换
1核心思路
①监听切换事件→得到索引值记录高亮的索引
②给每个tabber起一个标记0,1,2
③在taber内部比较标记记录的索引高亮不高亮 名称 功能描述 onChange(event:(index:number)void) Tab页签切换后触发的事件。 -index当前显示的index索引索引从0开始计算。 滑动切换、点击切换 均会触发 onTabbarClick(event:(index:number)void)10 Tab页签点击后触发的事件。 -index被点击的index索引索引从0开始计算。
2代码示意 Entry
Component
struct Index {//准备状态存储激活的索引State selectIndex:number0BuildermyBuilder(itemIndex:number,title:string,img:ResourceStr,selImg:ResourceStr){//如果激活的是自己图文/文本都需要调整样式-需要区分不同的 tabarColumn(){Image(itemIndexthis.selectIndex?selImg:img).width(30)Text(title).fontColor(itemIndexthis.selectIndex?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.selectIndex index})}}
感谢观看
