HarmonyOS 鸿蒙Next 使用web渲染含html标签数据渲染速度及滑动内容消失问题

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使用web渲染含html标签数据渲染速度及滑动内容消失问题

                                             

2 回复
class Tmp {
  a: MutableStyledString
  b: TextController
  c: string

  constructor(a: MutableStyledString, b: TextController, c: string) {
    this.c = c
    this.a = a
    this.b = b
  }
}
;

@Entry
@Component
struct Index {
  @State searchValue: string = '';
  @State dataArr: string[] =
    ["第一段a数据", "第二段ab数据", "第三段b数据", "第四d段数据", "第五cd段数据", "第六段数据"]
  @State showArr: Tmp[] = []
  count: number = 0
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Red });
  fontStyleAttr2: TextStyle = new TextStyle({ fontColor: Color.Blue });
  mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr1
  }]);
  controller3: TextController = new TextController();

  build() {
    Row() {
      Column() {
        Search({ value: $$this.searchValue, placeholder: 'Type to search...' })
          .searchButton('SEARCH')
          .width('90%')
          .height(40)
          .backgroundColor('#F5F5F5')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .margin(20)
          .onChange(() => {
            this.showArr = []
            this.controller3.setStyledString(this.mutableStyledString2)
            this.dataArr.filter((item: string) => {
              let index = item.indexOf(this.searchValue)
              if (this.searchValue && index != -1) {
                // MutableStyledString 要高亮的是列表,多关键字匹配的场景在里面加属性就可以
                let mutableStyledString = new MutableStyledString(item, [{
                  start: index,
                  length: this.searchValue.length,
                  styledKey: StyledStringKey.FONT,
                  styledValue: this.fontStyleAttr1
                }, {
                  start: item.length - 1,
                  length: 1,
                  styledKey: StyledStringKey.FONT,
                  styledValue: this.fontStyleAttr2
                }])
                let controller = new TextController()
                this.count += 1
                this.showArr.push(new Tmp(mutableStyledString, controller, this.count.toString()))
                console.log("mutableStyledString comntent:" + mutableStyledString.getString() + this.showArr.length);
              }
            })
          })
        ForEach(this.showArr, (item: Tmp) => {
          ListItem() {
            Row() {
              Text(undefined, { controller: item.b }).onAppear(() => {
                item.b.setStyledString(item.a)
              })
            }.width("100%").height(40).justifyContent(FlexAlign.Center)
          }
        }, (item: Tmp) => item.c)
      }.width('100%')
    }.height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 使用web渲染含html标签数据渲染速度及滑动内容消失问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next使用web渲染含html标签数据渲染速度及滑动内容消失问题,以下是一些直接相关的回答:

渲染速度问题: HarmonyOS 鸿蒙Next在web渲染方面采用了优化的渲染引擎,但渲染速度仍可能受到HTML内容复杂度、CSS样式计算、JavaScript执行效率等因素的影响。为提高渲染速度,建议优化HTML结构,减少不必要的DOM操作,合理使用CSS选择器,以及优化JavaScript代码。

滑动内容消失问题: 该问题可能与渲染引擎的滚动处理、内存管理或页面生命周期管理有关。在滑动过程中,如果页面或元素被销毁或重新渲染,可能导致内容消失。检查是否有代码在滑动时触发了页面的重新加载或元素的重新创建,并尝试调整相关逻辑。此外,确保滑动事件处理函数中没有引起页面卡顿或崩溃的操作。

如果上述方法无法解决问题,可能是系统或框架的bug,需要等待官方更新修复。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。在联系客服时,请提供详细的复现步骤、设备信息、系统版本以及使用的开发工具和框架版本,以便客服人员更快地定位并解决问题。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!