1、HarmonyOS WebView 加载 url 无法滚动？
scroll 里面嵌套 webView，demo 参考：
// xxx.etsimport web_webview from '@ohos.web.webview'
@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: WebLayoutMode = WebLayoutMode.FIT_CONTENT
build() { Column() { Text("这里是头部区域") .width("100%") .height('30%') .backgroundColor("#f89f0f") .fontSize(28) .fontColor("#FF0F0F") Web({ src: $rawfile('Index.html'), controller: this.controller }) .width('100%') .height(200)// .layoutMode(this.mode) .zoomAccess(false) .domStorageAccess(true) .overviewModeAccess(true) .imageAccess(true) .onlineImageAccess(true) .fileAccess(true) .databaseAccess(true) Text("这里是底部区域") .fontSize(28) .fontColor("#FF0F0F") .width("100%") .height('40%') .backgroundColor("#f89f0f") } .width('100%') .height('100%') }}
复制代码
2、HarmonyOS 事件回调？
有两个页面，A、B，在 A 中通过 router.pushUrl 方法跳转至 B 页面。B 页面有一个按钮 btn，点击 btn 时，如何将 btn 的触发事件告知 A 页面。B 页面从始至终不进行 back（返回）。
使用自定义订阅事件的方式来实现该功能：参考 demo：
//index.etsimport display from '@ohos.display';import emitter from '@ohos.events.emitter';import { router } from '@kit.ArkUI';import { JSON } from '@kit.ArkTS';
@Entry@Componentstruct DisplayTest {
build() { Column({space:20}){ Button('Test') .type(ButtonType.Capsule) .onClick(() => { let innerEvent: emitter.InnerEvent = { eventId: 12222 }; //触发id为12222的事件 emitter.on(innerEvent, (data) => { console.info('once callback' + JSON.stringify(data)); }); router.pushUrl({ url:'pages/PageOne' }) }) .width('50%') } .width("100%") .height('100%') .justifyContent(FlexAlign.Center) }}
//PageOne.etsimport emitter from '@ohos.events.emitter';
@Entry@Componentstruct PageOne {
build() { Column(){ Text('PageOne') .width('50%') Button('send') .type(ButtonType.Capsule) .width('50%') .onClick(() => { let eventData: emitter.EventData = { data: { "content": "c", "id": 1, } };
let innerEvent: emitter.InnerEvent = { eventId: 12222, priority: emitter.EventPriority.HIGH }; //发布id为12222的事件 emitter.emit(innerEvent, eventData); }) } .justifyContent(FlexAlign.Center) .width('100%') .height('100%') }}
复制代码
3、HarmonyOS ListItem 里面的属性 selectable 是干嘛用的？
ListItem 的 selectable 属性为当前 ListItem 元素是否可以被鼠标框选，并不能使用此属性实现多选功能开发者可以根据动态属性设置 attributeModifier 来维护管理多选状态，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5
动态设置组件的属性，支持开发者在属性设置时使用 if/else 语法，且根据需要使用多态样式设置属性。
4、HarmonyOS web 组件如何监听 h5 内部的 router 跳转？
需要拦截 web 组件内部的 h5 路由跳转进行参数的处理，请问有方法拦截吗
1、用于拦截 url 并返回响应数据：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V52、用于判断是否阻止此次访问：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onloadintercept10
5、HarmonyOS Scroll 中嵌套 Grid 组件的时候，Grid 必须要设置 height 高度吗？
Scroll 中嵌套 Grid 组件的时候，Grid 必须要设置 height 高度吗
Grid 的宽高没有设置时，默认适应父组件尺寸。 将 代码中 Grid 的父组件（Column）的宽高设置下比如： .width(“100%”) .height(“100%”)我这边是可以正常显示出来的。
参考 demo：
@Entry@Componentexport struct AllChannelsPage{
@State tabs: Array<String> = new Array();
@State dragChannel: string = 'drag';
private deviceWidth: number = (AppStorage.get('deviceWidth') as number) @State itemWidth: number = 80; @State itemHeight: number = 80; @State mineRowCount: number = 1; @State mineGridHeight: number = 100; @State mainTitieDes: string = '点击进入频道';
aboutToAppear(): void { for(let i = 0; i < 30; i++ ){ this.tabs.push('频道' + i); } this.itemWidth = (this.deviceWidth - 32 - 30)/4; this.itemHeight = this.itemWidth / 2.1; this.mineRowCount = Math.ceil(this.tabs.length / 4); this.mineGridHeight = this.mineRowCount * this.itemHeight + (this.mineRowCount - 1) * 10 }
@Builder pixelMapBuilder() { //拖拽过程样式 Column() { Text(this.dragChannel) .fontSize('15fp') // .fontColor($r('app.color.color202022')) .textAlign(TextAlign.Center) .width(this.itemWidth) .height(this.itemHeight) // .backgroundColor($r('app.color.colorF9F9F9')) .borderRadius(4) } }
changeIndex(index1: number, index2: number) { //交换数组位置 let temp = this.tabs[index1]; this.tabs[index1] = this.tabs[index2]; this.tabs[index2] = temp; }
build() { NavDestination(){ Column(){ Scroll(){ Column(){ Row(){ Text().width(4).height(16) // .backgroundColor($r('app.color.colorF21333')) .borderRadius(2) Blank().width(6) Text('我的频道').fontSize('16fp') // .fontColor($r('app.color.color202022')) Blank().width(8) Text(this.mainTitieDes).fontSize('12fp') // .fontColor($r('app.color.colorB1B1BB')) Blank().layoutWeight(1) Text('重置').fontSize('15fp') // .fontColor($r('app.color.color909099')) Text().width(1).height(10) // .backgroundColor($r('app.color.color909099')) .margin({left: 4, right: 4}) Text('编辑').fontSize('15fp') // .fontColor($r('app.color.colorF21333')) }.width('100%') .margin({top: 5, bottom: 15}) .padding({ left: 16, right: 16 })
Grid() { ForEach(this.tabs, (channel: string) => { GridItem() { Text(channel) .fontSize((channel?? '').length > 5 ? '11fp': '15fp') // .fontColor($r('app.color.color202022')) .textAlign(TextAlign.Center) // .width(this.itemWidth) // .height(this.itemHeight) .width('100%') .height(80) // .backgroundColor($r('app.color.colorF9F9F9')) .borderRadius(4) // .onTouch((event: TouchEvent) => { // if (event.type === TouchType.Up) { // this.dragChannel = channel.channelName ?? ''; // } // }) } }) } .columnsTemplate('1fr 1fr 1fr 1fr') .columnsGap(10) .rowsGap(10) .onScrollIndex((first: number) => { console.info(first.toString()); }) // .width('100%') // .height('80%') .padding({ left: 16, right: 16 }) .supportAnimation(true) .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。 return this.pixelMapBuilder(); //设置拖拽过程中显示的图片。 }) .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。 console.info('tag' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置 this.changeIndex(itemIndex, insertIndex) }) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
Text().width('100%').height(500) } .width("100%") .height("100%") } .width('100%') .layoutWeight(1)
}
}.hideTitleBar(true) }
}
复制代码
评论