一.滚动容器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().yOffset
AlertDialog.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.yOffset=this.myscroller.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 })
.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 {
@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')))
}
}
}
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:number=0
@Builder
myBuilder(itemIndex:number,title:string,img:ResourceStr,selImg:ResourceStr){
//如果激活的是自己,图文/文本,都需要调整样式->需要区分不同的 tabar
Column(){
Image(
itemIndex==this.selectIndex?selImg:img
)
.width(30)
Text(title)
.fontColor(itemIndex==this.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
})
}
}