代码没有报错，但是页面没有交互

最新推荐文章于 2024-10-14 21:38:54 发布

谢道韫666

最新推荐文章于 2024-10-14 21:38:54 发布

阅读量217

点赞数 1

分类专栏： BUG专栏文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/hqy1989/article/details/142186298

版权

BUG专栏专栏收录该内容

79 篇文章 1 订阅

订阅专栏

 ForEach(filterList, (item: string, index: number) => {
          Text(item)
            .fontColor(this.filterIndex == index ? Color.Red : Color.Gray)
            .fontSize(14)
            .padding({
              top: 5,
              bottom: 5,
              left: 10,
              right: 10
            })
            .backgroundColor('#f6f6f6')
            .borderRadius(5)
            .onClick(() => {
              // 记录点击索引
              this.filterIndex = index
              // 重置排序条件
              this.sortIndex = 0
              // 先筛选
              this.renderList = carList.filter((item => {
                if (index == 0) {
                  return true
                } else {
                  return item.type == index
                }

              }))
              // 再排序
              this.renderList = this.renderList.sort((a, b) => {
                switch (index) {
                  case 0:
                    return a.rank - b.rank
                  case 1:
                    return b.min_price - a.min_price
                  case 2:
                    return b.count - a.count
                  default:
                    return 0
                }
              })
            })
        })

检查 carList 数据是否正确加载：确保在执行排序操作之前，carList 已经正确获取到了数据。
数据绑定问题：确保 carList 的状态更改能够正确反映到界面上。在鸿蒙中，状态的更改有时需要特定的机制来触发界面更新。
检查 filterIndex 的值是否正确更改：在点击排序选项时，确认 filterIndex 的值确实按照预期进行了更新。

//解决办法，在 filterList 加了this

 ForEach(this.filterList, (item: string, index: number) => {
          Text(item)
            .fontColor(this.filterIndex == index ? Color.Red : Color.Gray)
            .fontSize(14)
            .padding({
              top: 5,
              bottom: 5,
              left: 10,
              right: 10
            })
            .backgroundColor('#f6f6f6')
            .borderRadius(5)
            .onClick(() => {
              // 记录点击索引
              this.filterIndex = index
              // 重置排序条件
              this.sortIndex = 0
              // 先筛选
              this.renderList = carList.filter((item => {
                if (index == 0) {
                  return true
                } else {
                  return item.type == index
                }

              }))
              // 再排序
              this.renderList = this.renderList.sort((a, b) => {
                switch (index) {
                  case 0:
                    return a.rank - b.rank
                  case 1:
                    return b.min_price - a.min_price
                  case 2:
                    return b.count - a.count
                  default:
                    return 0
                }
              })
            })
        })