HarmonyOS 鸿蒙Next ArkUI 使用Tabs+Web 第二页Web超出显示屏幕

HarmonyOS 鸿蒙Next ArkUI 使用Tabs+Web 第二页Web超出显示屏幕

Column() {
  Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
    TabContent() {
      Column(){
        Web({ src: $rawfile('index.html'), controller: this.webController })
          .zoomAccess(false)
          .width(WebConstant.WIDTH)
          .aspectRatio(1)
          .margin({ left:'3.3%', right: '3.3%', top: '7.1%' })
          .onConfirm((event) => {
            AlertDialog.show({
              message: '恭喜您抽中:' + `${event.message}`,
              confirm: {
                value: '确定',
                action: () => {
                  event.result.handleConfirm();
                }
              },
              cancel: () => {
                event.result.handleCancel();
              }
            });
            return true;
          })
      }.width('100%')
      .height('100%')
    }.tabBar(this.TabBuilder(0, 'green'))

    TabContent() {
      Column(){
        Web({ src: $rawfile('index.html'), controller: this.webController })
          .zoomAccess(false)
          .width(WebConstant.WIDTH)
          .aspectRatio(1)
          .margin({ left:'3.3%', right: '3.3%', top: '7.1%' })
          .onConfirm((event) => {
            AlertDialog.show({
              message: '恭喜您抽中:' + `${event.message}`,
              confirm: {
                value: '确定',
                action: () => {
                  event.result.handleConfirm();
                }
              },
              cancel: () => {
                event.result.handleCancel();
              }
            });
            return true;
          })
      }.width('100%')
      .height('100%')
    }.tabBar(this.TabBuilder(1, 'blue'))

    TabContent() {
      Column().width('100%').height('100%').backgroundColor('#FFBF00')
    }.tabBar(this.TabBuilder(2, 'yellow'))

    TabContent() {
      Column().width('100%').height('100%').backgroundColor('#E67C92')
    }.tabBar(this.TabBuilder(3, 'pink'))
  }
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
  this.currentIndex = index
})
.width(360)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')

![Screenshot_20230808_103235_com.unmanned.transportation.jpg](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNzs4OTpDREVGRCVGTU1PHWBlZ2VlZV1ZWf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADBAECBQAGB//EADoQAAIBAgQEBgYEBQUAAAABAAIRAyEEEjFBUWEyJhcYGRoRQygaGxwRUzUqHB0eHw/8QAGgEAAwEBAQEAAAAAAAAAAAAAAAECAwQF/8QAIhEAAgICAwEBAAAAAAAAAAAAAAECEQMhMUFRYXGBkaHR/9oADAMBAAIRAxEAPwDx//xAAcEAEAAgIDAQAAAAAAAAAAAAABAhESExIzQVFh/9oACAEDAQE/AD8A//xAZEQEBAQAAAAAAAAAAAAAAAAAAAQIDBP/EACIRAECAQQCAwAAAAAAAAAAAAERAhIhMQcTIjJRYX/aAAgBAQABBQI8L/8QAHhAAAQUBAAAAAAAAAAAAAAAAAQMEBRAhMR/9oACAEDAQE/EP8A//EABcQAQACAwEBAAAAAAAAAAAAAAECERAhMUFR/9oACAEDAQE/AT8A//xAAbEQEBAQEBAQAAAAAAAAAAAAABAhESExQdH/2gAMAwEAAhEDEQA/ANj//xAAcEAEAAgIDAQAAAAAAAAAAAAABAhESExIkH/2gAIAQEAAT8QPf/2gAIAQMBAT8QoP//EABsRAAICAQMDAwUAAAAAAAAAAAERAiExEEEx/9oACAEDAQE/EP8A//xAAbEQEBAQEBAQAAAAAAAAAAAAABAhESExQdH/2gAMAwEAAhEEEQ/ANj//xAAaEQEAAwEBAQAAAAAAAAAAAAAAAQIDERExQf/aAAgBAQABPyF//xAAcEAEAAgIDAQAAAAAAAAAAAAABAhESExIkH/2gAIAQEAAT8QPf/2gAIAQMBAT8QoP//EABsRAAICAQMDAwUAAAAAAAAAAAERAiExEEEx/9oACAEDAQE/EP8A