HarmonyOS 如何让界面中同时有两个webview

如何让界面中同时有两个webview,控制他们显示隐藏,web里边的内容不需要刷新,目前是是用状态值控制宽高在0和屏幕宽高之间切换,每次都会刷新页面。

HarmonyOS
2025-01-09 18:02:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以使用Stack组件,通过改变两个web的zIndex来控制显示隐藏

import webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  controller2: webview.WebviewController = new webview.WebviewController();
  @State html1zIndex: number = 10
  @State html2zIndex: number = 9

  build() {
    Column() {
      Button('html1显示').onClick((event: ClickEvent) => {
        this.html1zIndex = 10
        this.html2zIndex = 9
      })
      Button('html2显示').onClick((event: ClickEvent) => {
        this.html1zIndex = 9
        this.html2zIndex = 10
      })
      Stack() {
        Web({ src: $rawfile('html1.html'), controller: this.controller })
          .width('100%')
          .height(300)
          .zIndex(this.html1zIndex)
        Web({ src: $rawfile('html2.html'), controller: this.controller2 })
          .width('100%')
          .height(300)
          .zIndex(this.html2zIndex)
      }
    }

  }
}

也可通过给两个web添加visibility属性,来进行显隐的控制

import webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  controller2: webview.WebviewController = new webview.WebviewController();
  @State visibility1: Visibility = Visibility.Visible
  @State visibility2: Visibility = Visibility.None
  build() {
    Column() {
      Button('html1显示').onClick((event: ClickEvent) => {
        this.visibility1 = Visibility.None
        this.visibility2 = Visibility.Visible
      })
      Button('html2显示').onClick((event: ClickEvent) => {=
        this.visibility2 = Visibility.None
        this.visibility1 = Visibility.Visible
      })

      // Stack() {
      Web({ src: $rawfile('html1.html'), controller: this.controller })
        .width('100%')
        .height(300)
        .visibility(this.visibility1)
      Web({ src: $rawfile('html2.html'), controller: this.controller2 })
        .width('100%')
        .height(300)
        .visibility(this.visibility2)
    }

  }
}
分享
微博
QQ
微信
回复
2025-01-09 19:52:53
相关问题
HarmonyOS 怎么两个list同时滚动
387浏览 • 1回复 待解决
如何Swiper在一屏显示两个Item?
1656浏览 • 1回复 待解决
HarmonyOS 如何合并两个对象
556浏览 • 1回复 待解决
HarmonyOS llibrary两个页面如何跳转
204浏览 • 1回复 待解决
HarmonyOS 如何比较两个日期的大小?
875浏览 • 1回复 待解决
HarmonyOS 两个日期怎么比较
581浏览 • 1回复 待解决
HarmonyOS 如何两个对象进行排序
454浏览 • 1回复 待解决
HarmonyOS 两个网页间的数据如何同步
215浏览 • 1回复 待解决
HarmonyOS 关于两个权限的区别
678浏览 • 1回复 待解决
两个设备控制相关问题
9212浏览 • 3回复 已解决
HarmonyOS 两个同级的组件问题
907浏览 • 1回复 待解决