HarmonyOS 实战开发 —— 基于webview的嵌套滚动及与ArkUI组件的联动

【HarmonyOS】webview在鸿蒙系统无点击反应 webview的activity的launchmode是singleTop类型的。在shouldOverrideUrlLoading方法中,判断url是否包含某个字段,然后替换url该字段为其他字段,然后继续打开当前activity,但是跳转不过去。设置WebViewClient 且该方法返回 true ,则说明由应用的代码处理该 url,WebView 不处理。1、在其他品牌手机没有出现这个问题,华为非鸿蒙系统也无此问题。欲了解更多更全技术文章,欢迎访问。 阅读详情

📚往期笔录记录🔖:

🔖鸿蒙(HarmonyOS)北向开发知识点记录~
🔖鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景?
🔖嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~
🔖对于大前端开发来说,转鸿蒙开发究竟是福还是祸?
🔖鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……


场景描述

在一些应用的首页或者详情页上,需要原生组件与网页进行一些嵌套或者展开收起的逻辑。

  • 场景一:在滑动场景中原生组件与web页面嵌套,需要先让原生组件的高度变化,等原生组件到底后web页面高度随之变化。
  • 场景二:嵌套在列表的原生组件中的web页面,点击按钮可以展开或者收起。

方案描述

将web组件放置在List或者Scroll组件中,通过web的嵌套滚动属性nestedScroll和Scroll的onScrollFrameBegin属性实现场景一的场景效果。

封装一个web组件,在web的onpageEnd回调中拿到网页高度,当点击展开后将web的高度设置为拿到的高度即可实现场景二的效果。

场景一:在应用详情页面,上半部分展示简述,下方 web 页面展示详情内容

在这里插入图片描述

方案

在父组件Scroll里放置一个原生Image组件和一个web组件,给Image组件设置最大和最小高度。通过在Scroll组件每帧开始滚动时触发的回调onScrollFrameBegin中监听y轴高度,并通过一个变量传递到Image组件中,从而实现Image组件的高度动态变化。下半部分web组件使用控制嵌套滚动的方法nestedScroll和禁止滚动的方法setScrollable来实现一个吸顶的效果。

核心代码

1. 在Scroll组件里设置Image和web组件,并将web组件nestedScroll属性的枚举值设置为变量。注意:Image组件最小高度为100vp,所以需要设置web的高度为calc(‘100%-1

HarmonyOS 开发实践 —— 基于webview的嵌套滚动及与ArkUI组件的联动 在以上dom树的示例中,可以看出来父组件List中有两个listItem子组件和两个封装的web组件,封装的类里面是有一个Stack父组件以及web和column两个子组件,分别加载web页面和展开更多的文本。给web页面一个最小高度,这样就可实现以上List列表的效果,当用户想查看详情的时候,就可以点击展开更多,通过这个点击事件将web加载时拿到的页面高度在变量里取出来,赋值到web组件的高度上,这样就可以实现点击展开详情页的效果,滑动到最下面后再点击收起把web的高度恢复到最小值即可。 阅读详情

相关推荐

鸿蒙Web组件_学习

Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模式,新窗口中加载页面,位置权限管理,Cookie管理,应用侧使用前端页面JavaScript等能力。页面调试:Web组件支持使用Devtools工具调试前端页面。下面通过常见使用场景举例,来具体介绍Web组件功能特性。

m0_62167422的博客 972

HarmonyOS鸿蒙开发:ArkUI滚动容器-基于webView的嵌套滚动场景

内嵌在可滚动容器(Scroll、List...)中的Web组件,接收到滑动手势事件,需要对接ArkUI框架的NestedScrollMode枚举类型,使得Web组件可以嵌套ArkUI可滚动容器,进行嵌套滚动。

2401_84917132的博客 1376

鸿蒙(HarmonyOS)实战开发篇——基于webView的嵌套滚动

实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。整体实现效果为:页面整体为一个Scroll,Scroll中嵌套一个Tabs组件,Tabs里有多个web组件可以实现首页效果。

lc748258的博客 1475

【鸿蒙ArkUI实战开发】基于webView的嵌套滚动

实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。整体实现效果为:页面整体为一个Scroll,Scroll中嵌套一个Tabs组件,Tabs里有多个web组件可以实现首页效果。

CTrup的博客 1204

【鸿蒙实战开发】基于webView的嵌套滚动

内嵌的ArkUI可滚动容器中的Web组件,接收到滑动手势事件,实现在父组件中嵌套一个web组件可以平滑滚动。

CTrup的博客 781

HarmonyOS 开发实践——基于webView的嵌套滚动

实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。整体实现效果为:页面整体为一个Scroll,Scroll中嵌套一个Tabs组件,Tabs里有多个web组件可以实现首页效果。

liuhaojiabin的博客 885

HarmonyOS 实战开发 —— 基于webView的嵌套滚动

实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。整体实现效果为:页面整体为一个Scroll,Scroll中嵌套一个Tabs组件,Tabs里有多个web组件可以实现首页效果。

CTrup的博客 784

鸿蒙5.0实战案例:基于webView的嵌套滚动

实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。整体实现效果为:页面整体为一个Scroll,Scroll中嵌套一个Tabs组件,Tabs里有多个web组件可以实现首页效果。

Maniu_666的博客 881

鸿蒙开发实践——基于webView的嵌套滚动

实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。自身和父组件同时滚动,自身和父组件都到达边缘以后,如果自身有边缘效果,则自身触发边缘效果,否则父组件触发边缘效果。只自身滚动,不与父组件联动。

android__bye的博客 733

HarmonyOS Next开发学习手册——Web组件嵌套滚动

Web组件嵌套滚动的典型应用场景为,在一个页面中,有多个独立的区域需要进行滚动,当用户滚动Web区域内容时,可带动其他滚动区域进行滚动,以达到上下滑动页面的用户体验。内嵌在可滚动容器( Scroll 、 List …)中的Web组件,接收到滑动手势事件,需要对接ArkUI框架的 NestedScrollMode 枚举类型,使得Web组件可以嵌套ArkUI可滚动容器,进行嵌套滚动。

maniuT的博客 1491

DAIC-WOZ抑郁数据集实战:从申请到特征提取的全流程避坑指南

本文详细解析了DAIC-WOZ抑郁数据集从申请到特征提取的全流程,提供了实用的避坑指南和代码模板。涵盖数据获取技巧、多模态特征工程(面部动作单元、音频特征、文本处理)以及样本不平衡解决方案,帮助研究者高效处理这一经典抑郁分析数据集。

weixin_29196315的博客 172

手把手教你用Docker快速部署开源MES系统(附避坑指南)

本文提供了一份详细的实战指南,手把手教你使用Docker容器化技术快速部署开源MES系统。内容涵盖从环境准备、项目选型、数据库配置到应用服务器优化、前端部署及生产环境监控的全流程,并附有避坑指南,旨在帮助中小制造企业IT人员和开发者低成本、高效率地构建智能制造解决方案。

f0g1h2的博客 1065

用Python实现图片风格迁移,让你的图片更加的高逼格!

先来看下效果: 上图是老王在甘南合作的米拉日巴佛阁外面拍下的一张照片,采用风格迁移技术后的效果为: 一些其它效果图: 下面进入正题。 近年来,由深度学习所引领的人工智能(AI)技术浪潮,开始越来越广泛地应用到生活各个领域。这其中,人工智能与艺术的交叉碰撞,在相关技术领域和艺术领域引起了高度关注。就在上个月,由电脑生成的艺术品在佳士得(Christie’s)的拍卖价竟高达43.25万美元,...

Python追梦 6184

monocle使用sct整合数据integration还是rna中的counts数据 轨迹分析 拟时序

【代码】monocle使用sct整合数据integration还是rna中的counts数据 轨迹分析 拟时序。

生信小博士的博客 1049

[QMT量化交易小白入门]-105、震荡市最适合的策略:ETF多标的动态网格策略,回测年化收益47.81%

本专栏主要是介绍QMT的基础用法,常见函数,写策略的方法,也会分享一些量化交易的思路,大概会写200篇左右。QMT的相关资料较少,在使用过程中不断的摸索,遇到了一些问题,记录下来和大家一起沟通,共同进步。

木头大左的博客 2066

顶刊论文引言用AI怎么写?借助Gemini 3 Pro结合四段式写出逻辑清晰的Introduction

写研究目标时,先明确研究问题,直接回应前文提到的研究缺口,如 “This study aims to investigate whether X modulates Y via the Z pathway in human cells.”然后再提出你的研究假设,当理论依据清晰时,可以用如 “We hypothesized that inhibiting X would rescue Y deficiency in this model.”的句子点出研究目标。要求:1)明确陈述本研究拟解决的核心科学问题;

智能AI让学术科研更容易 181

零基础学simulink仿真建模--使用Simulink来构建一个混合动力无人机中燃料电池与锂电池协同控制的仿真模型

延长飞行时间:燃料电池的能量密度高于锂电池,适合长时间稳定供电。提高功率密度:锂电池能够快速响应瞬时高功率需求,比如起飞和加速阶段。优化能源管理:通过有效的能量管理系统,可以根据实际需求动态调整燃料电池和锂电池的工作状态,从而提高整体效率。通过上述步骤,我们简要介绍了如何基于Simulink实现混合动力无人机中燃料电池与锂电池协同控制的仿真模型。

amy_mhd的博客 191

SAR成像专栏目录

为方便大家阅读,我做了一个专栏目录,蓝色字有超链接,可以直接打开。 本专栏默认读者已具备雷达系统的基本知识或者已阅读过雷达导论专栏中的文章。 1. 概述 SAR成像概述 星载SAR的各项指标解读(史上最全) SAR成像算法的实现途径与算力分析 2. SAR成像原理与SAR系统简介 雷达与分辨率 SAR成像原理与方法 SAR图像的形成和处理 SAR系统设计 3. 点目标仿真 点目标仿真(一)—— 数学模型 点目标仿真(二)—— Matlab仿真 4. 成像算法 更新中 雷达导论专

7472

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: HarmonyOS 实战开发 —— 网络重定向在HarmonyOS上的场景及解决方案
下一篇: HarmonyOS 实战开发 —— 基于RichEditor的评论编辑
普通网友
博客等级 码龄2年 7013粉丝 723原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值