文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

OpenHarmony如何实现二级联动

2024-11-29 23:19

关注

效果呈现

本例最终效果如下:

运行环境

本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:

实现思路

开发步骤

根据实现思路,具体实现步骤如下:

首先构建列表数据,在records中记录数字列表中各个数字的首项索引值,具体代码块如下:

...
@State typeIndex: number = 0
private tmp: number = 0
private titles: Array = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
private contents: Array = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
    , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
    "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
private records: Array = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
private classifyScroller: Scroller = new Scroller();
private scroller: Scroller = new Scroller();
...

数字列表:具体代码块如下:

...
build() {
  Column({ space: 0 }) {
    List  ({ space: 50, scroller: this.classifyScroller, initialIndex: 0 }) {
      ForEach(this.titles, (item, index) => {
        ListItem() {
          Column() {
            Text(item)
              .fontSize(14)
            ...  
          }
        }
      }
      ...
    }
    .listDirection(Axis.Horizontal)
    .height(50)
  }
}

数字列表,具体代码块如下:

List({ space: 20, scroller: this.scroller }) {
  ForEach(this.contents, (item, index) => {
    ListItem() {
      Column({ space: 5 }) {
        Image($r("app.media.app_icon"))
          .width(40)
          .height(40)
        Text(item)
          .fontSize(12)
      }
      ...
    }
  }
}
.listDirection(Axis.Horizontal) //列表排列方向水平
.edgeEffect(EdgeEffect.None) //不支持滑动效果

数字的索引值判断,根据当前滚动数字的首项索引值计算出数字的索引,具体代码块如下:

...
findClassIndex(ind: number) { // 当前界面最左边图的索引值ind
  let ans = 0
  // 定义一个i 并进行遍历 this.records.length = 10
  for (let i = 0; i < this.records.length; i++) { 
    // 判断ind在this.records中那两个临近索引值之间
    if (ind >= this.records[i] && ind < this.records[i + 1]) {
      ans = i
      break
    }
  }
  return ans
}
findItemIndex(ind: number) { 
  // 将ind重新赋值给类型列表的索引值
  return this.records[ind]
}
...

通过Line组件构成下滑线,具体代码块如下:

...
if (this.typeIndex == index) {
  Line()
    //根据长短判断下划线
    .width(item.length === 2 ? 25 : item.length === 3 ? 35 : 50)
    .height(3)
    .strokeWidth(20)
    .strokeLineCap(LineCapStyle.Round)
    .backgroundColor('#ffcf9861')
}
...

点击数字,数字列表随之滑动:首先获取到点击数字的索引,通过该索引计算出下方对应数字的起始项索引,然后通过scroller的scrollToIndex方法跳转到对应索引的数字项,具体代码块如下:

...
.onClick(() => {
  this.typeIndex = index
  this.classifyScroller.scrollToIndex(index)
  let itemIndex = this.findItemIndex(index)
  console.log("移动元素:" + itemIndex)
  this.scroller.scrollToIndex(itemIndex)
})
...

数字列表的滑动或点击导致数字的变动:通过List组件中onScrollIndex事件获取的到屏幕中最左边数字的索引值start,然后通过该索引值计算出对应的数字的索引currentClassIndex,然后通过scrollToIndex控制数字跳转到对应索引处,具体代码块如下:

...
.onScrollIndex((start) => {
  let currentClassIndex = this.findClassIndex(start)
  console.log("找到的类索引为: " + currentClassIndex)
  if (currentClassIndex != this.tmp) {
    this.tmp = currentClassIndex
    console.log("类别移动到索引: " + currentClassIndex)
    this.typeIndex = currentClassIndex
    this.classifyScroller.scrollToIndex(currentClassIndex)
  }
})
...

完整代码

完整示例代码如下:
@Entry
@Component
struct TwoLevelLink {
  @State typeIndex: number = 0
  private tmp: number = 0
  private titles: Array = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
  private contents: Array = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
    , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
    "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
  private colors: Array = ["#18183C", "#E8A027", "#D4C3B3", "#A4AE77", "#A55D51", "#1F3B54", "#002EA6", "#FFE78F", "#FF770F"]
  private records: Array = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
  private classifyScroller: Scroller = new Scroller();
  private scroller: Scroller = new Scroller();
  // 根据数字列表索引计算对应数字的索引
  findClassIndex(ind: number) {
    let ans = 0
    for (let i = 0; i < this.records.length; i++) {
      if (ind >= this.records[i] && ind < this.records[i + 1]) {
        ans = i
        break
      }
    }
    return ans
  }
  // 根据数字索引计算对应数字列表的索引
  findItemIndex(ind: number) {
    return this.records[ind]
  }
  build() {
    Column({ space: 0 }) {
      List  ({ space: 50, scroller: this.classifyScroller, initialIndex: 0 }) {
        ForEach(this.titles, (item, index) => {
          ListItem() {
            Column() {
              Text(item)
                .fontSize(24)
              if (this.typeIndex == index) {
                Line()
                  .width(item.length === 2 ? 25 : item.length === 3 ? 35 : 50)
                  .height(3)
                  .strokeWidth(20)
                  .strokeLineCap(LineCapStyle.Round)
                  .backgroundColor('#ffcf9861')
              }
            }
            .onClick(() => {
              this.typeIndex = index
              this.classifyScroller.scrollToIndex(index)
              let itemIndex = this.findItemIndex(index)
              console.log("移动元素:" + itemIndex)
              this.scroller.scrollToIndex(itemIndex)
            })
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .height(50)
      List({ space: 20, scroller: this.scroller }) {
        ForEach(this.contents, (item, index) => {
          ListItem() {
            Column({ space: 5 }) {
              Text(item)
                .fontSize(30)
                .fontColor(Color.White)
            }
            .width(60)
            .height(60)
            .backgroundColor(this.colors[item-1])
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.scroller.scrollToIndex(index)
            })
          }
        })
      }
      .listDirection(Axis.Horizontal) //列表排列方向水平
      .edgeEffect(EdgeEffect.None) //不支持滑动效果
      .onScrollIndex((start) => {
        let currentClassIndex = this.findClassIndex(start)
        console.log("找到的类索引为: " + currentClassIndex)
        if (currentClassIndex != this.tmp) {
          this.tmp = currentClassIndex
          console.log("类别移动到索引: " + currentClassIndex)
          this.typeIndex = currentClassIndex
          this.classifyScroller.scrollToIndex(currentClassIndex)
        }
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}
来源:鸿蒙开发者社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯