HarmonyOS 鸿蒙Next 点击事件触发文本背景色改变问题

发布于 1周前 作者 gougou168 最后一次编辑是 5天前 来自 鸿蒙OS

点击事件触发文本背景色改变问题


Text(item.emoji + ' ' + item.title)
  .onTouch((event) => {
    this.stopScroll()
  })
  .stateStyles({
    pressed: {
      .backgroundColor('#D3D3D3')
    },
  })


private startScroll() {
  if (this.scrollTimer > 0) {
    clearInterval(this.scrollTimer)
  }
  if (this.vModel.recommendWordList.length > 0) {
    this.scrollTimer = setInterval(() => {
      if (this.scroller.isAtEnd()) {
        this.xlength = -0.2
      } else if (this.scroller.currentOffset()?.xOffset == 0) {
        this.xlength = 0.2
      }
      this.scroller.scrollBy(this.xlength, 0)
    }, 20)
  }
}

private stopScroll() {
  if (this.scrollTimer > 0) {
    clearInterval(this.scrollTimer)
  }
}

开发中发现滚动中的文本无法直接触发stateStyles的背景色改变,所以我在ontouch方法中先触发停止滚动方法,这样背景色就可以改变了,但是如果不触发onclick点击事件,而是滑动下去的话,文本该怎么重新开始滚动,对ontouch里的返回值进行判断吗还是?


更多关于HarmonyOS 鸿蒙Next 点击事件触发文本背景色改变问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

Scroll组件有一个事件回调onScrollStop(event: () => void)，在滚动停止时触发。手拖动Scroll或拖动Scroll的滚动条触发的滚动，手离开屏幕并且滚动停止时会触发该事件。可以在这个回调中再次调用startScroll方法，启动自动滚动。参考以下demo：

@Entry
@Component
struct Index {
  @State text:string = '';
  scroller: Scroller = new Scroller();
  contentTextArray: string[] = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10', 'text11', 'text12', 'text13', 'text14', 'text15', 'text16', 'text17', 'text18', 'text19', 'text20'];
  @State scrollTimer: number|null = null;
  @State yLength: number = 0;

  private startScroll() {
    if (this.scrollTimer !== null) {
      clearInterval(this.scrollTimer)
    }
    if (this.contentTextArray.length > 0) {
      this.scrollTimer = setInterval(() => {
        if (this.scroller.isAtEnd()) {
          this.yLength = -0.5
        } else if (this.scroller.currentOffset()?.yOffset == 0) {
          this.yLength = 0.5
        }
        this.scroller.scrollBy(0, this.yLength)
      }, 20)
    }
  }

  private stopScroll() {
    if (this.scrollTimer !== null) {
      clearInterval(this.scrollTimer)
    }
  }

  onPageShow(): void {
    this.startScroll();
  }

  build() {
    Column() {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.contentTextArray, (item: string, i) =>{
            Text(item).height(40).width('100%').textAlign(TextAlign.Center).fontSize(20).margin(10)
              .onTouch((event) => {
                this.stopScroll()
              })
              .stateStyles({
                normal: {
                  .backgroundColor('#e18923')
                },
                pressed: {
                  .backgroundColor('#D3D3D3')
                },
              })
          }, (item: string) => item)
        }.width('100%')
      }
      .scrollable(ScrollDirection.Vertical)
      .scrollBarWidth(0)
      .height('100%')
      .onScrollStop(() => {
        this.startScroll();
      })
    }
    .padding(10)
  }
}

更多关于HarmonyOS 鸿蒙Next 点击事件触发文本背景色改变问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，若要实现点击事件触发文本背景色改变，可以通过以下步骤进行：

  1. 定义布局文件：在XML布局文件中，为需要改变背景色的文本视图设置ID，并定义初始背景色。

  2. 设置点击事件监听：在JavaScript或TypeScript的页面中，通过ID获取文本视图组件，并为其设置点击事件监听器。

  3. 实现点击事件处理逻辑：在点击事件处理函数中，通过组件的setStyle方法或类似API，修改文本视图的背景色。

  4. 更新UI：确保在修改背景色后，UI能够即时更新，通常框架会自动处理这一点，但在某些情况下可能需要手动触发。

示例代码片段（伪代码，具体API需参考HarmonyOS开发文档）：

// 获取文本视图组件
let textView = this.$element('textViewId');

// 设置点击事件监听
textView.onClick(() => {
    // 修改背景色
    textView.setStyle({
        backgroundColor: '#FF0000' // 红色背景
    });
});

注意，上述代码中的textViewId需替换为实际布局文件中定义的文本视图ID，#FF0000为示例背景色，可按需修改。

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

回到顶部