MUI、HTML5+、HBuilder实现透明渐变导航栏+自定义按钮（右上角分享按钮）

最新推荐文章于 2024-05-17 13:58:03 发布
置顶 最新推荐文章于 2024-05-17 13:58:03 发布
阅读量7.5k 收藏 9
点赞数 3
分类专栏： 移动开发 # HBuilder MUI 文章标签： mui HBuilder webview HTML5 自定义按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaonizuoren/article/details/84849891
版权

先上效果图：

js代码：

mui.plusReady(function() {
			var ws = plus.webview.currentWebview();
			ws.setStyle({
				"titleNView":{
					backgroundColor: '#f7f7f7',//导航栏背景色
                    titleText: '透明渐变(native模式)',//导航栏标题
				    titleColor: '#000000',//文字颜色
				    type:'transparent',//透明渐变样式
				    buttons:[{
				    	text:'',
				    	float:'right',
				    	type:'share',
				        onclick:"javascript:plus.webview.currentWebview().evalJS('shareHref();')"
				    }],
				    autoBackButton: true,//自动绘制返回箭头
				    splitLine:{//底部分割线
				        color:'#cccccc'
				    }
				}
			})
		})

html代码：

<body>
		<div class="mui-content">
			<!--顶部banner图 开始-->
			<div id="kr-article-banner" class="kr-article-banner">
				<div id="kr-article-cover" class="kr-article-cover">
					<img width="100%" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBE00AN0001NOS.jpg">
				</
最低0.47元/天 解锁文章
胶泥座人
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html怎么让导航栏背景透明,Swift - 导航栏背景全透明效果的实现（沉浸式效果）...
weixin_33642448的博客
06-08 2758
由于导航栏背景透明，那么整个视图的背景便会占据全部的可视区域，从而让用户有一种沉浸式的体验。下面通过样例演示如何实现这个效果。1，实现原理(1)如果想让导航栏(navigationBar)透明，只需将导航栏背景图片(backgroundImage)设置为一个空的 image即可。不过这样设置后，导航栏下方还是会有一条灰色色的分隔线。//设置导航栏背景为空图片self.navigationContr...
通过CSS实现颜色渐变
乌龟不背壳
12-10 668
通过CSS实现颜色渐变
HBuilder-旋转图片动画效果（简易）
nikezhenhaokan的博客
03-02 937
需自备三张图片，依次命名为a1.jpg a2.jpg a3.jpg。
Hubuilder处理打包后Vue项目
最新发布
weixin_62364503的博客
05-17 342
处理了公司古老项目，是Vue2 H5项目，现在需要把这个项目改成APP。
HBuilder X 自定义淡粉色粉色主题(其他颜色皆可设置)
kyle1211的博客
02-19 3524
HBuilder自定义主题颜色，可以直接复制上述代码，生成主题，也可以自己设置喜欢的主题颜色！
HBuilderX自定义编辑器代码颜色
qq_43102730的博客
07-05 8623
自定义代码颜色支持 注释、字符串、关键字、变量、标签 等所有代码分区(token)颜色。目前支持的语言包括：JavaScript(ES6+)、HTML(ES6+)、Vue、CSS、Less、SCSS、Stylus、Typescript、Markdown、JSON。在文件setting.json的源码视图中，通过定义 “editor.tokenColorCustomizations” 字段来自定义您喜欢的主题颜色。将可自定义代码颜色的相关参数中配置的规则复制到对应主题（[Default]、[Monokai]
基于html5+mui+hbuilder的移动app.zip
02-12
标题"基于html5+mui+hbuilder的移动app.zip"表明这是一个关于使用HTML5技术，配合MUI框架，并利用HBuilder集成开发环境来创建移动应用的项目。HTML5的引入，主要是为了提高网页的交互性、可访问性和离线存储能力，...
MUI+hbuilder开发的微店商城，完整带前台+后台+SQL
01-11
《MUI+hbuilder开发的微店商城：前端与后端技术详解及数据库构建》 本文将深入探讨基于MUI和HBuilder开发的微店商城项目，这是一个完整的解决方案，包括前端展示、后台管理系统以及数据库设计。我们将围绕项目的...
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传
05-01
本教程将详细介绍如何利用HBuilder、HTML5 Plus和MUI框架来实现这一功能。 首先，HBuilder是一款强大的HTML5开发工具，提供了丰富的组件和API，可以加速HTML5应用的开发。它集成了代码编辑、预览、打包等一站式服务...
原生JS实现 MUI导航栏透明渐变效果
10-19
透明渐变导航是一种解决滚动条通顶的变通方案。这篇文章主要介绍了原生JS实现 MUI导航栏透明渐变效果,需要的朋友可以参考下
HTML5+MUI实现手机app扫码功能
03-31
MUI提供了丰富的组件，如导航栏、按钮、栅格系统等，可以帮助我们构建出美观且响应式的用户界面。例如，可以使用MUI的`mui-btn`类创建一个启动扫描的按钮，当点击按钮时调用摄像头并开始扫描。 ```html ...
导航栏调透明度HTML,导航栏透明度问题
weixin_39610807的博客
06-09 1442
设置导航栏背景颜色：[[UINavigationBar appearance] setBarTintColor:[UIColor blueColor]];此方法不能设置颜色透明度，如果需要设置背景色透明度，只能用图片代替或者删除底层遮盖视图删除底层视图(不建议修改)for (UIView *view in self.navigationController.navigationBar.subvie...
HBuilderX.vue文件 以及 表单，导航栏的组件使用
maseter的博客
05-18 3234
<template> ui设计 所有的有关界面的都卸载这个里面 <view> 子标签 所有的标签都写在这个里面，写在<template>里面，可以嵌套，但不可以写两个 <script> js业务代码 所有有关业务代码的都写在这个里面 <style> css 样式 界面的大小，颜色，以及所有相关的样式都写在这里 <uni-nav-bar> 自定义导航栏 ...
关于HBuilderX背景颜色-粉色
smx19980410的博客
10-22 8002
第一步 打开编译器 找到工具里面的设置 点击源码视图 将下面代码复制到上面的地方 { “editor.caretWidth” : 1, “editor.colorScheme” : “Default”, “editor.wordWrap” : true, “explorer.autoReveal” : true, “explorer.iconTheme” : “hx-file-icons-colorful”, “workbench.colorCustomizations” : { “[Default]”
透明导航 html,导航栏(Nav) 全透明效果的一种另类实现
weixin_32185607的博客
06-07 2374
首先，我们看看不经过任何处理的Nav层级结构：Nav层级结构其中需要注意是：UIImageView是导航栏下面的那条线。有时候我们会发现Nav有一层蒙版，其实都是UIVisualEffectView在作怪。主流实现方案给nav设置一张空图片便可达到导航栏全透明效果。//设置导航栏背景图片为一个空的image，这样就透明了[self.navigationController.navigationBa...
Button 提交按钮+颜色变化选择器 shape 实现
xfh001的专栏
07-16 839
xml version="1.0" encoding="utf-8"?> selector xmlns:android="http://schemas.android.com/apk/res/android"> item android:state_pressed="false"> shape> solid android:color="#009A
mui案例：导航栏 颜色渐变
草巾冒小子的博客
07-02 884
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-
H5+ Hbuilder 状态栏设置颜色
唐僧的专栏
03-15 7019
if (this.isJudge) {//如果是H5+ if (this.currentItem == 11) { //朋友 plus.navigator.setStatusBarStyle('dark'); } else { plus.navigator.setStatusBarStyle('light'); } } 设置...
{ type: "pie", label: { show: false, }, center: ['50%', '50%'], radius: ['57%', '63%'], startAngle: 225, endAngle: -45, data: [ { value: chartData.value, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#72bafc', }, { offset: 1, color: 'rgba(71, 190, 247, 0.16)', }, ], }, borderRadius: [0, 20, 0, 20] }, }, { value: chartData.totol, itemStyle: { color: "transparent", }, }, ], }, 半圆改为占70%
06-10
要将这个半圆改为占70%，需要修改两个属性：radius和startAngle/endAngle。 首先，将radius修改为['57%', '70%']，这样就将半圆的半径扩大到了70%。 其次，需要将startAngle和endAngle调整，使得半圆的角度也变成70%。根据半圆面积占圆面积的比例，70%的半圆应该对应252度的角度，因为360度的圆对应的面积是100%。 所以，可以将startAngle改为(225+252)/2=239度，endAngle改为(225+360-252)/2=167度。 修改后的代码如下所示： ``` { type: "pie", label: { show: false, }, center: ['50%', '50%'], radius: ['57%', '70%'], // 修改为占70% startAngle: 239, // 修改为对应252度的角度 endAngle: 167, // 修改为对应252度的角度 data: [ { value: chartData.value, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#72bafc', }, { offset: 1, color: 'rgba(71, 190, 247, 0.16)', }, ], }, borderRadius: [0, 20, 0, 20] }, }, { value: chartData.totol, itemStyle: { color: "transparent", }, }, ], } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值