实现一个嵌套滑动,在整个新闻详情页中,上面是网页Webview,下面是评论区由原生组件组成

实现一个嵌套滑动,在整个新闻详情页中,上面是网页Webview,下面是评论区由原生组件组成,二者要共用一个scroll滑动条,实现嵌套滑动。

HarmonyOS
2024-05-26 11:57:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
OwenOO

使用的核心API

  •  Scroll
  •  web_webview

核心代码解释

以Scroll可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动;该组件嵌套List子组件滚动时,若List不设置宽高,则默认全部加载;

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
​ 
@Entry 
@Component 
struct NestedScroll { 
webviewController: web_webview.WebviewController = new web_webview.WebviewController; 
@State message: string = 'Hello World'; 
@State displayList: Arry[] = [] 
aboutToAppear() { 
​ 
  this.displayList = [ 
    new Arry("匿名1", $r('app.media.startIcon'), "中国高质量的发展,高水平的对外开放,一带一路建设促进中国可持续的高质量发展,科技创新,管理体制创新,做强做大。"), 
    new Arry("匿名2", $r('app.media.startIcon'), "我们更加紧密地团结在以习主席为核心的党中央周围,全面贯彻习主席新时代中国特色社会主义思想,把思想和行动统一到党中央关于经济形势的分析判断上来,不折不扣贯彻落实党中央决策部署,保持战略定力,坚定信心决心,同舟共济、众志成城,我们就一定能以高质量发展的新成效为全面建设社会主义现代化国家开好局起好步。"), 
    new Arry("匿名3", $r('app.media.startIcon'), "防范化解金融风险,特别是防止发生系统性金融风险,是金融工作的根本性任务,也是金融工作的永恒主题。。"), 
  ] 
} 
opt:dividerTmp = new dividerTmp(1,45,10,'#ffe9f0f0') 
build() { 
  Scroll() { 
    Column() { 
      Web({ src: $rawfile('local.html'), controller: this.webviewController }).height('80%') 
      Row() { 
        TextInput({ placeholder: '请写出您的评论' }) 
          .width(300) 
          .type(InputType.Normal) 
        Button('发送') 
          .onClick(() => { 
            console.log('CS') 
          }) 
      } 
      Text("全部评论") 
        .fontSize(24) 
        .fontWeight(FontWeight.Normal) 
        .offset({x:-120,y:10}) 
​ 
​ 
      List() { 
        ForEach(this.displayList, (item: Arry, index: number) => { 
          ListItem() { 
            Column() { 
              Row() { 
                Image(item.image) 
                  .width(30) 
                  .objectFit(ImageFit.Contain) 
                  .borderRadius(18) 
                  .offset({ x: -95, y: 16 }) 
                Text(item.name) 
                  .fontSize(16) 
                  .offset({ x: -90, y: 16 }) 
              } 
​ 
              Text(item.context) 
                .fontSize(18) 
                .offset({ x: 48}) 
                .width('80%') 
                .margin({top:16}) 
            } 
          } 
        }) 
      }.divider(this.opt) 
    } 
  } 
  .height('100%') 
  .scrollBarColor(Color.Pink) 
  .nestedScroll({ 
    scrollForward: NestedScrollMode.PARENT_FIRST, 
    scrollBackward: NestedScrollMode.SELF_FIRST 
  }) 
  .edgeEffect(EdgeEffect.Spring) 
  .friction(0.6) 
  .backgroundColor('#DCDCDC') 
  .scrollBar(BarState.Off) 
  .width('100%') 
  .height('100%') 
​ 
} 
} 
​ 
​ 
class Arry { 
name: string; 
image: Resource; 
context: string; 
​ 
constructor(name: string, image: Resource, context: string) { 
  this.name = name; 
  this.image = image; 
  this.context = context; 
} 
} 
class dividerTmp{ 
strokeWidth: Length = 1; 
startMargin: Length = 45; 
endMargin: Length = 10; 
color: ResourceColor = '#ffe9f0f0'; 
​ 
constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) { 
  this.strokeWidth = strokeWidth; 
  this.startMargin = startMargin; 
  this.endMargin = endMargin; 
  this.color = color; 
} 
}
分享
微博
QQ
微信
回复
2024-05-27 15:52:54
相关问题
CustomDialog如何实现半模态详情页效果
496浏览 • 1回复 待解决
如何跳转设置—应用详情页
512浏览 • 1回复 待解决
如何启动应用的系统设置详情页
656浏览 • 1回复 待解决
MySQL 服务什么组成
1660浏览 • 1回复 待解决
怎么判断一个类型stirng
293浏览 • 1回复 待解决
Tabs组件嵌套滑动组件
588浏览 • 1回复 待解决
如何跳转到设置的应用详情页
718浏览 • 1回复 待解决
下 ArkTSmath库一个?
1349浏览 • 2回复 待解决
如何实现一个折叠组件
364浏览 • 1回复 待解决
MongoDB哪种语言写的?
4286浏览 • 1回复 待解决