HarmonyOS 鸿蒙Next 面包屑导航实现示例
HarmonyOS 鸿蒙Next 面包屑导航实现示例
import { promptAction } from '@kit.ArkUI'
class MyDataItem {
id: number = 0
provinceid: string = ""
provincename: string = ""
cityid: string = ""
cityname: string = ""
countyid: string = ""
countyname: string = ""
}
// 示例数据
const transformedData: MyDataItem[] =
[
{
"id": 1,
"provinceid": "110000",
"provincename": "北京市",
"cityid": "110100000000",
"cityname": "北京市",
"countyid": "110101000000",
"countyname": "东城区"
},
{
"id": 2,
"provinceid": "110000",
"provincename": "北京市",
"cityid": "110100000000",
"cityname": "北京市",
"countyid": "110102000000",
"countyname": "西城区"
},
{
"id": 3,
"provinceid": "110000",
"provincename": "北京市",
"cityid": "110100000000",
"cityname": "北京市",
"countyid": "110103000000",
"countyname": "朝阳区"
},
{
"id": 4,
"provinceid": "120000",
"provincename": "天津市",
"cityid": "120100000000",
"cityname": "天津市",
"countyid": "120101000000",
"countyname": "和平区"
},
{
"id": 5,
"provinceid": "120000",
"provincename": "天津市",
"cityid": "120100000000",
"cityname": "天津市",
"countyid": "120102000000",
"countyname": "河东区"
},
{
"id": 6,
"provinceid": "120000",
"provincename": "天津市",
"cityid": "120100000000",
"cityname": "天津市",
"countyid": "120103000000",
"countyname": "河西区"
},
{
"id": 7,
"provinceid": "130000",
"provincename": "河北省",
"cityid": "130100000000",
"cityname": "石家庄市",
"countyid": "130102000000",
"countyname": "桥西区"
},
{
"id": 8,
"provinceid": "130000",
"provincename": "河北省",
"cityid": "130100000000",
"cityname": "石家庄市",
"countyid": "130103000000",
"countyname": "新华区"
},
{
"id": 9,
"provinceid": "130000",
"provincename": "河北省",
"cityid": "130100000000",
"cityname": "石家庄市",
"countyid": "130104000000",
"countyname": "长安区"
}
]
export class MyTabBean {
name: string = ""
idType: string | null = null // 'province' | 'city' | null = null
idContent: string | null = null
x: number = -1 //当前位置
width: number = -1 //当前宽度
constructor(name: string) {
this.name = name
}
}
@Entry
@Component
struct Page11 {
scroller: Scroller = new Scroller()
@State titles: MyTabBean[] = []
scrollWidthOld: number = 0
@State searchValue: string = "" //搜索内容
@State errorInfo: string = "" //错误信息
@State contentList: contentItem[] = [] //要显示的列表
aboutToAppear(): void {
this.getDataByIdType("全部", null, null)
}
build() {
Column() {
//tab栏
Scroll(this.scroller) {
Row() {
ForEach(this.titles, (item: MyTabBean, index: number) => {
if (index == 0) {
Text(item.name)
.padding({ left: '30lpx', right: '16lpx' ,top:'5lpx',bottom:'5lpx'})
.fontColor(index == this.titles.length - 1 ? "#FF1919" : "#2E2E2E")
.fontSize('30lpx')
.transition(TransitionEffect.OPACITY.animation({ duration: 200 }))
.onAreaChange((previousArea: Area, currentArea: Area) => {
if (item.x == -1) {
item.x = currentArea.position.x as number
}
if (item.width == -1) {
item.width = currentArea.width as number
}
})
.onClick(() => {
this.getDataByIdType("全部", null, null)
})
} else {
Row() {
Text(">").width('44lpx').height('44lpx')
Text(item.name)
.fontColor(index == this.titles.length - 1 ? "#FF1919" : "#2E2E2E")
.fontSize('30lpx')
}.padding({ right: '16lpx' ,top:'5lpx',bottom:'5lpx'})
.transition(TransitionEffect.OPACITY.animation({ duration: 200 }))
.onAreaChange((previousArea: Area, currentArea: Area) => {
if (item.x == -1) {
item.x = currentArea.position.x as number
}
if (item.width == -1) {
item.width = currentArea.width as number
}
})
.onClick(() => {
this.getDataByIdType(item.name, item.idType, item.idContent, index)
})
}
})
}.height('95lpx')
.onAreaChange((previousArea: Area, currentArea: Area) => {
let scrollWidth = currentArea.width as number
console.info(`scrollWidth:${scrollWidth}`)
if (this.titles.length > 0 && this.scrollWidthOld != scrollWidth) {
this.scrollWidthOld = scrollWidth
let item = this.titles[this.titles.length-1]
this.scroller.scrollTo({
xOffset: (item.x - scrollWidth / 2 + item.width / 2),
yOffset: 0,
animation: true
})
}
})
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.borderWidth({ bottom: 1 })
.borderColor("#e3e3e3")
.align(Alignment.Start)
.width('100%')
//内容
Scroll() {
Column() {
ForEach(this.contentList, (item: contentItem, index: number) => {
if (index != 0) {
Text()
.height(1)
.width('720lpx')
.margin({ left: '30lpx' })
.backgroundColor("#e3e3e3")
}
Row() {
Column() {
Text(item.name).fontSize('30lpx').fontColor("#4B4B4B")
}.layoutWeight(1).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Center)
}
.width('100%')
.backgroundColor(Color.White)
.padding({ top: '20lpx', bottom: '20lpx' })
.onClick(() => {
this.getDataByIdType(item.name, item.idType, item.idContent)
// else{//是叶子节点了，点击需要调用加入部门接口
// // for(let i = 0 ;i<this.contentList.length;i++){
// // this.contentList[i].isSelect = false
// // }
//
// }
})
})
}
.width('100%')
.padding({ left: '30lpx', right: '30lpx' })
.margin({ top: '20lpx', bottom: '20lpx' })
.borderWidth({ top: 1, bottom: 1 })
.borderColor("#e3e3e3")
.backgroundColor(Color.White)
}
.align(Alignment.Top)
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Off)
.backgroundColor("#fafafa")
.visibility(this.contentList.length != 0 ? Visibility.Visible : Visibility.None)
}
.height('100%')
.width('100%');
}
// 封装一个方法来根据ID类型和具体内容返回相应的数据
//idType: 'province' | 'city' | null
getDataByIdType(name: string, idType: string | null, idContent: string | null, index?: number) {
console.info(`内容填充`)
let contentItems: contentItem[] = [];
if (idType === null) {
// 如果idType为空，返回所有省份的不重复数据
const seenProvinces: object = Object();
for (let i = 0; i < transformedData.length; i++) {
const item = transformedData[i];
const provinceKey = item.provincename + item.provinceid;
if (!seenProvinces[provinceKey]) {
seenProvinces[provinceKey] = true;
contentItems.push({
name: item.provincename,
idType: 'province',
idContent: item.provinceid
});
}
}
} else {
// 如果idType为省份或城市，筛选出相应级别的所有数据
for (let i = 0; i < transformedData.length; i++) {
const item = transformedData[i];
if (idType === 'province') {
// 如果idType为省份，筛选出指定省份下的所有数据
if (item.provinceid === idContent) {
contentItems.push({
name: item.cityname,
idType: 'city',
idContent: item.cityid
});
}
} else if (idType === 'city') {
// 如果idType为城市，筛选出指定城市下的所有数据
if (item.cityid === idContent) {
contentItems.push({
name: item.countyname,
idType: 'county',
idContent: item.countyid
});
}
}
}
}
if(contentItems.length == 0){
let str = ""
for(let i = 0 ;i<transformedData.length;i++){
if(idContent ==transformedData[i].countyid ){
str = `省：${transformedData[i].provincename}，市：${transformedData[i].cityname}，区：${transformedData[i].countyname}`
break;
}
}
promptAction.showDialog({
title: '当前选中的是',
message: `${str}`,
buttons: [
{
text: '我知道了',
color: '#000000'
}
],
})
return
}
this.contentList = [...contentItems]
//标题栏填充
console.info(`标题栏填充`)
if (!idType) {
console.info(`用户点了根，或者是首次启动的`)
this.titles = [new MyTabBean(name)]
} else {
//清空index之后的
console.info(`index:${index}`)
console.info(`this.titles:${JSON.stringify(this.titles)}`)
if (index) {
this.titles.splice(index)
}
let myTabBean = new MyTabBean(name)
myTabBean.idType = idType
myTabBean.idContent = idContent
this.titles.push(myTabBean)
console.info(`this.titles:${JSON.stringify(this.titles)}`)
}
}
}
class contentItem {
name: string = "";
idType: string | null = null; //'province' | 'city' | 'county' | null
idContent: string | null = null;
}
1 回复
