MUI实现透明的导航栏

最新推荐文章于 2021-12-01 13:56:33 发布

Trevor Lan

最新推荐文章于 2021-12-01 13:56:33 发布

阅读量1.2k

点赞数

分类专栏： MUI

本文链接：https://blog.csdn.net/lwqBrell/article/details/100113016

版权

实现的效果

通过JS API的形式来改变导航栏的透明效果

mui('.mui-bar-transparent').transparent({
    top: 0,
    offset: 150,
    duration: 16,
    scrollby: document.querySelector('.mui-scroll-wrapper')
})

参数	描述
top	距离顶部高度(`滚动到该位置即触发`)
offset	滚动透明距离
duration	过渡时间（单位`ms）`
scrollby	监听区域滚动容器，如监听mui scroll控件滚动,则: `document.querySelector('.mui-scroll-wrapper')`

案例源码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<ti

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Trevor Lan

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

mui H5+实现原生导航栏配置

糖果π

05-30

1402

mui H5+实现原生导航栏配置

原生JS实现 MUI导航栏透明渐变效果

01-19

mui内置有H5版本的透明渐变导航控件，教程参考mui官网；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果；下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示：首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100

参与评论您还未登录，请先登录后发表或查看评论

mui 设置背景透明

晓风残叶

11-11

5601

mui 设置背景透明要注意两点，一个是打开或者创建时设置样式的背景色为透明，二是在body标签设置背景为透明代码如下：设置背景为透明： mui.openWindow({ url: "query-filter.html", id: "query-filter.html", styles: { position: 'absolute', ...

IOS让标题栏背景透明、设置左右baritem

fanxiaoxuan1234的专栏

05-25

715

//标题栏背景透明 + (void)setNavigationBarTranslucent:(UIViewController *)vc { [vc.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; vc.na

html导航栏透明渐变效果,原生JS实现 MUI导航栏透明渐变效果

weixin_33267830的博客

06-03

433

JS代码0) ? bodyScrollTop : documentScrollTop;return scrollTop;}//获取CSS样式function getStyle(element,attr){if(element.currentStyle){return element.currentStyle[attr];}else{return window.getComputedStyle(el...

微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

10-17

本文将详细介绍如何利用MUI实现导航栏的透明渐变功能，这一功能通常是通过改变`opacity`属性来实现的。首先，我们需要了解透明渐变效果的实现原理。这种效果主要分为两步： 1. **定位背景视图**：在导航栏下方，...

mui实现上下滑动控制显隐效果

LZUGIS

12-30

1606

概述本文讲述在mui框架下实现上下滑动控制显隐的效果。效果实现 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi...

全屏透明

snpmyn

08-10

352

方式一 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); ViewGroup rootView = (ViewGroup) vi...

mui 沉浸式状态栏详解

曉儂

11-14

8024

改写manifest.xml，在plus对象内增加："statusbar": { "immersed": "supportedDevice", "style":"dark" }加上h.min.js h.min.js下载地址 http://www.hcoder.net/h加在mui.min js之后mui.plusReady(function(){ //判断是否支持沉浸式 v

Android QMUI实战：沉浸式/适配状态栏

Android技术之家

10-19

1099

近期研究QMUI换肤的实现，顺便分析了下QMUI的沉浸式。网上已有很多关于QMUI实现页面沉浸式的文章，简而言之：复杂了。本期，我们仅通过几行代码，即可完美实现页面沉浸式效果，并轻松匹配换...

MUI 设置APP状态栏

discuzmall的博客

08-06

2724

一、前言　　状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。　　图例：二、状态栏状态类型默认变色（设置颜色）透明（沉浸式）消失（全屏）三、状态栏变色　　1.效果如图：　　2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色） ...

隐藏·透明-开发中实际使用到的状态栏、导航栏效果一网打尽

Chin_Style的博客

12-25

2201

一、前期基础知识储备状态栏 StatusBar：顶部的一条显示时间、电量、通知等信息的 bar 导航栏 NavigationBar：底部包含 back 键、home 键以及 recent 键的 bar 实际开发中，关于两个bar的处理还是很常见的，每个应用可能采用的设置也不尽相同，这里博主就列出常用的关于两个bar的设置： 1）状态栏隐藏不可见； 2）状态栏可见设为透明，随不同界面...

uni-app 导航栏透明设置

热门推荐

m0_46653120的博客

12-01

1万+

uni-app 导航透明背景图

MUI导航栏透明渐变----原生JS实现

止于至善

11-07

4235

首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器css代码body,p,h1{margin: 0;} .module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; } .module-laye

H5+状态栏透明(沉浸式)/全屏/设置颜色整理

weixin_34248487的博客

08-24

6134

H5+对web APP状态栏设置整理：开发工具：HBuilder 直接新建移动APP项目测试方法为HBuilder的ios真机测试 1、沉浸式状态栏如果页面顶部是图片，一般会把状态栏变成透明。首先可以检测下当前环境是否支持沉浸式状态栏，检测语句： //是否支持沉浸式状态栏 alert(plus.navigator.isImmerse...

沉浸式状态栏的简易实现

findhappy117的博客

03-12

676

代码地址如下：http://www.demodashi.com/demo/14922.html ####前言在android开发的过程中，经常会涉及到沉浸式状态栏的问题，说白了，就是手机屏幕顶部栏的颜色显示问题，为了实现美感一体的效果，许多app都已经开始了沉浸式状态栏的显示，这里，我也简单介绍一个沉浸式状态栏的类StatusBarUtil，这个类使用简单并很好的解决了兼容问题。今天涉及的...

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

jiaonizuoren的博客

12-06

7665

先上效果图： js代码： mui.plusReady(function() { var ws = plus.webview.currentWebview(); ws.setStyle({ "titleNView":{ backgroundColor: '#f7f7f7',//导航栏背景色 titleText: '透明渐...

mui原生渐变式导航5+

web_longboss的博客

10-14

2630

mui底部导航栏点击跳转页面