网站设计报价表,企业邮箱下载,自媒体一号WordPress主题,那个网站做国外售货【每日学点HarmonyOS Next知识】web滚动、事件回调、selectable属性、监听H5内部router、Grid嵌套时高度设置
1、HarmonyOS WebView加载url无法滚动#xff1f;
scroll 里面嵌套webView#xff0c;demo参考#xff1a;
// xxx.ets
import web_webview from ohos.web.webv…【每日学点HarmonyOS Next知识】web滚动、事件回调、selectable属性、监听H5内部router、Grid嵌套时高度设置
1、HarmonyOS WebView加载url无法滚动
scroll 里面嵌套webViewdemo参考
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: WebLayoutMode WebLayoutMode.FIT_CONTENTbuild() {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.ets
import display from ohos.display;
import emitter from ohos.events.emitter;
import { router } from kit.ArkUI;
import { JSON } from kit.ArkTS;Entry
Component
struct 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.ets
import emitter from ohos.events.emitter;Entry
Component
struct 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-V5 2、用于判断是否阻止此次访问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
Component
export struct AllChannelsPage{State tabs: ArrayString 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)}}
