HarmonyOS RichText组件如何取消滚动条

利用RichText组件进行html内容输出，外部内容写了Scroll进行上下拖拉，但是现在RichText组件会在内容上下拖拉，请问如何取消RichText组件的上下拖拉的滚动条。代码如下：

@Entry
@Component
struct Article {
  @State data: string =
    '<html>\n <head></head>\n<style>p{font-size:50px;}</style>\n <body>\n  <p style=\"text-align: center;\">\n <video width="100%" controls>\n <source src="xxxx">\n </video>\n </p>\n  <p style="">文本内容&nbsp;</p>\n  <p style=\"text-align:center;\">\n   <!--IMAGEARRAY#0--></p>\n  <p>文本内容</p>\n  <p style=\"text-align:center;\">\n   <!--IMAGEARRAY#1--></p>\n  <p>文本内容。</p>\n  <p style=\"text-align:center;\">\n   <!--IMAGEARRAY#2--></p>\n  <p>文本内容</p>\n  <p>文本内容</p>\n </body>\n</html>';
  build() {
    Column() {
      //头部
      Row() {
        Image($r('app.media.arrow_left'))
          .width('8%')
        Column() {
          Row({ space: 15 }) {
            Image($r('app.media.tts'))
              .width('6%')
            Column() {
              Row({ space: 3 }) {
                Row() {
                }
                .width(4)
                .height(4)
                .backgroundColor('#9f9f9f')
                .borderRadius(50)
                Row() {
                }
                .width(4)
                .height(4)
                .backgroundColor('#9f9f9f')
                .borderRadius(50)
                Row() {
                }
                .width(4)
                .height(4)
                .borderRadius(50)
                .backgroundColor('#9f9f9f')
              }
            }
          }
        }.margin({
          right: 20
        })
        .layoutWeight(1)
        .alignItems(HorizontalAlign.End)
      }
      .width('100%')
      .height(30)
      .margin({
        bottom: 20
      })
      .zIndex(10)
      Scroll() {
        Column() {
          //标题
          Text('加快HarmonyOS NEXT正式商用步伐，共建共享鸿蒙新世界')
            .fontSize(30)
            .fontWeight(600)
            .padding({
              left: 10,
              right: 10
            })
            .margin({
              bottom: 20
            })
          //来源及发布时间
          Row({ space: 15 }) {
            Text('HarmonyOS').fontSize(12).fontColor('#9f9f9f')
            Text('2024-06-24 17:18').fontSize(12).fontColor('#9f9f9f')
          }.width('100%')
          .padding({
            left: 20
          }).margin({
            bottom: 40
          })
          //内容
          RichText(this.data)
            .onStart(() => {
              console.info('RichText onStart');
            })
            .onComplete(() => {
              console.info('RichText onComplete');
            })
            .margin({
              left: 15,
              right: 15,
              bottom: 20
            })
            .size({ height: 'auto' })
          Text('编辑')
            .width('100%')
            .padding({
              left: 20
            })
            .fontSize(14)
            .fontColor('#9f9f9f')
            .margin({
              bottom: 10
            })
          Text('校对')
            .width('100%')
            .padding({
              left: 20
            })
            .fontSize(14)
            .fontColor('#9f9f9f')
            .margin({
              bottom: 40
            })
          //点赞
          Row() {
            Image($r('app.media.27'))
              .width(15)
          }
          .width(100)
          .height(40)
          .borderWidth(1)
          .borderRadius(50)
          .borderColor('#9f9f9f')
          .justifyContent(FlexAlign.Center)
          .margin({
            bottom: 50
          })
          //分享
          Text('-----   分享至  -----')
            .fontSize(12)
            .fontColor('#9f9f9f')
            .margin({
              bottom: 20
            })
          //图标
          Row() {
            Image($r('app.media.05'))
              .width(35)
            Image($r('app.media.06'))
              .width(35)
            Image($r('app.media.detail_page_qq'))
              .width(35)
            Image($r('app.media.07'))
              .width(35)
          }
          .width('100%')
          .margin({
            bottom: 100
          })
          .justifyContent(FlexAlign.SpaceEvenly)
        }
      }
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      //评论
      Row() {
        Column() {
          Row({ space: 10 }) {
            Image($r('app.media.act_write'))
              .width(15)
            Text('写评论...')
              .fontSize(12)
              .fontColor('#9f9f9f')
          }
          .width('80%')
          .height(30)
          .backgroundColor('#eae8e8')
          .borderRadius(50)
          .borderWidth(1)
          .borderColor('#bcbaba')
          .padding({
            left: 10
          })
        }.layoutWeight(1)
        Column() {
          Row({ space: 15 }) {
            Image($r('app.media.circle_comment'))
              .width(15)
            Image($r('app.media.circle_praise'))
              .width(15)
            Image($r('app.media.circle_share'))
              .width(15)
            Image($r('app.media.must_fill'))
              .width(15)
          }
        }.margin({
          right: 20
        })
      }
      .position({
        bottom: 0
      })
      .padding({
        bottom: 5
      })
      .width('100%')
      .backgroundColor('#ffffff')
      .zIndex(11)
    }
    .width('100%')
    .height('100%')
  }
}

HarmonyOS

fox280

16h前

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

取消RichText组件的上下拖拉的滚动条。可以设置HTML内容的父元素为style="overflow: hidden;"，比如代码中设置为：'<html style="overflow: hidden;">\n'，不过这种情况设置后在触摸到richtext渲染的区域页面不会滚动，触摸其他位置可以正常滚动。RichTextt内部是webview，web组件设置嵌套滚动，可以通过loadData方法加载html文本。使用web组件参考下这种写法，替换RichText部分：

controller: webview.WebviewController = new webview.WebviewController();//这行需要放在build外面
//内容
Web({ src: '', controller: this.controller })
  .javaScriptAccess(true)
  .onControllerAttached(() => {
    //加载本地资源
    this.controller.loadData(this.data, "text/html", "UTF-8", " ", " ");
  })
    //嵌套滚动
  .nestedScroll({
    scrollForward: NestedScrollMode.SELF_FIRST,
    scrollBackward: NestedScrollMode.PARENT_FIRST,
  })

14h前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS RichText组件如何取消滚动条

订阅鸿蒙技术特刊，精选内容抢先看