鸿蒙 arkTs 下拉筛选,在空间下方

@Entry
@Component
struct FilterOptionPage {

  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,

    }),
    customStyle: true, //自定义样式,去掉边距 圆角等
    offset: { dx: 0, dy: 60 }, //控制位置
    alignment: DialogAlignment.Top, // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
  })
  @State message: string = 'Hello World'

  onCancel() {
    console.info('取消回调')
  }

  onAccept() {
    console.info('确认回调')
  }





  @State listArr: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 89, 89, 55, 22, 15, 16, 36, 45, 85, 777, 888, 999]
  @State showOne:boolean = false;
  build() {
    Row() {
      Flex() {
        Column() {
          Row() {
            Text("option1")
              .backgroundColor(Color.White)
              .backgroundColor(Color.Brown)
              .textAlign(TextAlign.Center)
              .width('33%')
              .height(60)
              .onClick(() => {
                this.showOne=!this.showOne
              })
            Text("option2")
              .backgroundColor(Color.White)
              .backgroundColor(Color.Red)
              .textAlign(TextAlign.Center)
              .width('33%')
              .height(60).onClick(()=>{
              this.dialogController.open()
            })
          Text("option2")
              .backgroundColor(Color.White)
              .backgroundColor(Color.Blue)
              .textAlign(TextAlign.Center)
              .width('33%')
              .height(60)
          }.height(60).width('100%')

          List({ space: 10 }) {
            ForEach(this.listArr, (item, index) => {
              ListItem() {
                Text(item + "")
              }.height(30)
            })
          }.height('100%')

        }
        .height('100%')
      }

      Column() {
        Column(){

        }.backgroundColor(Color.Orange).visibility(this.showOne?Visibility.Visible:Visibility.Hidden).height(400).width('100%')
      }.position({ y: 60 }).backgroundColor(0xA6000000).visibility(this.showOne?Visibility.Visible:Visibility.Hidden).height('100%').
      width('100%').
      animation({duration:2000})

    }
  }
}

@CustomDialog
export struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  aboutToAppear(){
    console.log("CustomDialogExample  aboutToAppear----")
  }


  build() {
    Column() {
      Text('内容').margin(10)
        .fontSize(20)
      Flex({
        justifyContent: FlexAlign.SpaceAround
      }) {

      }
      .margin({
      }).width('100%').height(300).backgroundColor(Color.Orange)
    }.width('100%')
  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Echarts的y轴旁添加下筛选框,你需要使用Echarts提供的工具箱(toolbox)功能来实现。具体步骤如下: 1.在Echarts的Option中配置工具箱(toolbox)功能,包括toolbox的显示位置、图标、功能等。例如: ``` toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } } ``` 2.在工具箱中添加自定义按钮,用于实现下筛选框的功能。例如: ``` toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true}, myFilter: { show: true, title: '筛选', icon: 'path/to/myFilter.png', onclick: function () { //实现下筛选框的功能 } } } } ``` 3.在自定义按钮的onclick事件中实现下筛选框的功能。具体实现方式可以使用HTML和JavaScript来实现。例如: ``` myFilter: { show: true, title: '筛选', icon: 'path/to/myFilter.png', onclick: function () { //创建下筛选框 var html = '<select>'; html += '<option value="option1">选项1</option>'; html += '<option value="option2">选项2</option>'; html += '<option value="option3">选项3</option>'; html += '</select>'; var div = document.createElement('div'); div.innerHTML = html; div.style.position = 'absolute'; div.style.left = '100px'; div.style.top = '100px'; document.body.appendChild(div); //监听下框变化事件 div.getElementsByTagName('select')[0].addEventListener('change', function () { //根据选中的值更新图表数据 var option = chart.getOption(); option.series[0].data = [20, 30, 40]; chart.setOption(option); }); } } ``` 4.在下筛选框的变化事件中根据选中的值更新图表数据。例如: ``` div.getElementsByTagName('select')[0].addEventListener('change', function () { //根据选中的值更新图表数据 var option = chart.getOption(); option.series[0].data = [20, 30, 40]; chart.setOption(option); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值