HarmonyOS 鸿蒙Next筛选页面demo

可以新建一个工程，将下方代码替换Index.ets文件：

@Entry
@Component
struct Index {
  arr1 = ['黑色品种','有色品种','农产品','化工品种','宏观分析']
  arr2 = [
    ['焦炭','玻璃','螺纹钢','动力煤','钢材','焦煤','锰硅','热卷板','铁矿石','线材'],
    ['黄金','锌','铝','铜','镍','铅','锡','白银','云南省水电','工业硅','碳酸锂'],
    ['菜籽','豆粕','玉米淀粉','白糖','苹果','棉花','玉米','豆油','豆二','鸡蛋'],
    ['玻璃','20号胶','橡胶','聚氯乙烯','聚烯烃','塑料','沥青','甲醇','尿素','聚丙烯','纸浆'],
    ['中证500指数','2年期国债','5年期国债','上证50指数','10年期国债','沪深300指数','股指']
  ]

  arr3 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

  @State selectIndex1:number = 0
  @State selectIndex2:number = 0

  filterScroller = new Scroller()
  scroller = new Scroller()

  build() {
    Column() {
      Row() {
        Text('筛选:')
          .fontSize(16)
        List() {
          ForEach(this.arr1, (name: string, index) => {
            ListItem() {
              Stack({alignContent:Alignment.Bottom}){
                Text(name)
                  .textAlign(TextAlign.Center)
                  .fontColor(this.selectIndex1 === index ? $r('app.color.theme_blue') : Color.Black)
                  .margin({left:$r('app.float.filter_margin_10'),right:$r('app.float.filter_margin_10')})
                  .height($r('app.float.filter_height'))
              }
              .onClick(()=>{
                this.selectIndex1 = index
                this.selectIndex2 = 0
                this.filterScroller.scrollToIndex(0)
              })
            }
          }, (name:string):string => name)
        }
        .layoutWeight(1)
        .scrollBar(BarState.Off)
        .listDirection(Axis.Horizontal)
        .margin({left:$r('app.float.filter_margin_10')})
        .height($r('app.float.filter_height'))

      }
      .height($r('app.float.filter_height'))
      .margin({left:$r('app.float.filter_margin_10')})

      Divider().color(Color.Gray).height(1)

      Row() {
        Text('品种:')
          .fontSize(16)
        List({scroller:this.filterScroller}) {
          ForEach(this.arr2[this.selectIndex1], (name: string, index) => {
            ListItem() {
              Column(){
                Text(name)
                  .textAlign(TextAlign.Center)
                  .fontColor(this.selectIndex2 === index ? $r('app.color.theme_blue') : Color.Black)
                  .margin({left:$r('app.float.filter_margin_10'),right:$r('app.float.filter_margin_10')})
                  .height($r('app.float.filter_height'))
                  .border({width:{bottom:index === this.selectIndex2 ? 2 : 0},color:$r('app.color.theme_blue')})
              }
              .onClick(()=>{
                this.selectIndex2 = index
              })
            }
          }, (name:string):string => name)
        }
        .layoutWeight(1)
        .scrollBar(BarState.Off)
        .listDirection(Axis.Horizontal)
        .margin({left:$r('app.float.filter_margin_10')})
        .height($r('app.float.filter_height'))

      }
      .height($r('app.float.filter_height'))
      .margin({left:$r('app.float.filter_margin_10')})

      Divider().color(Color.Gray).height(1)

      List({scroller:this.scroller}) {
        ForEach(this.arr3, (name: number, index) => {
          ListItem() {
            Column(){
              Row(){
                //图片
                Image('').width(100).height(60).backgroundColor($r('app.color.theme_blue'))
                  .borderRadius(5)
                  .margin({left:$r('app.float.filter_margin_10')})

                Column(){
                  Text('永安焦炭早报20240521')
                    .margin({left:$r('app.float.filter_margin_5'),right:$r('app.float.filter_margin_5'),top:$r('app.float.filter_margin_5')})
                  Column(){
                    Flex({justifyContent:FlexAlign.SpaceBetween}){
                      Text('黑色品种-楠')
                        .maxLines(1)
                        .margin({left:$r('app.float.filter_margin_5'),right:$r('app.float.filter_margin_5')})

                      Text('2024-05-21')
                        .maxLines(1)
                        .margin({right:$r('app.float.filter_margin_10')})
                    }
                  }
                  .margin({bottom:$r('app.float.filter_margin_5')})
                  .justifyContent(FlexAlign.End)
                  .layoutWeight(1)
                  .width('100%')
                }
                .alignItems(HorizontalAlign.Start)
                .layoutWeight(1)
              }
              .width('100%')
              Divider().backgroundColor(Color.Gray).margin({left:$r('app.float.filter_margin_10')})
            }
            .height(80)
            .width('100%')
          }
        })
      }
      .layoutWeight(1)

    }
    .width('100%')
    .height('100%')

  }
}

将src/main/resources/base/element中的color.json中替换为：

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "theme_blue",
      "value": "#4f4fd9"
    }
  ]
}

然后再新建float.json文件，内容为：
{
  "float": [
    {
      "name": "filter_height",
      "value": "40vp"
    },

    {
      "name": "filter_margin_10",
      "value": "10vp"
    },
    {
      "name": "filter_margin_5",
      "value": "10vp"
    }
  ]
}

关于HarmonyOS鸿蒙Next筛选页面demo，以下是一个简要的实现思路：

在HarmonyOS鸿蒙Next系统中，筛选页面通常通过ArkTS和ArkUI框架进行开发。你可以利用这些框架提供的组件和API来实现一个功能完善的筛选页面。

具体来说，你可以创建一个筛选页面，其中包含多个筛选条件，如商品名称、商品状态等。这些筛选条件可以以横向拖动的形式展示，用户可以通过点击或拖动来选择所需的筛选条件。

在筛选条件确定后，你可以通过编写相应的逻辑来处理筛选请求，并根据筛选条件更新页面内容。此外，你还可以利用HarmonyOS鸿蒙Next系统的分布式能力，实现与其他设备的互联互通和数据共享，进一步提升用户体验。

需要注意的是，在实际开发中，你需要根据具体的需求和场景进行定制化开发，并遵循HarmonyOS鸿蒙Next系统的开发规范和最佳实践。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html