BoringTu
BoringTu
  • 发布:2018-05-07 17:58
  • 更新:2018-05-08 10:22
  • 阅读:3183

MUI 标题栏渐变 怎样让整个标题渐变,而不仅仅是标题栏的背景颜色?

分类:MUI

MUI 标题栏渐变 怎样让整个标题渐变,而不仅仅是标题栏的背景颜色?

(并不是关于原生的,项目要兼容wap和app)

我看了下MUI里关于Function: transparent的源码,确实只改了background-color,而且也没有暴露什么回调函数的入口

<header class="mui-bar mui-bar-transparent">  
    <h1 class="mui-title">标题</h1>  
</header>
mui(targetElement).transparent()
2018-05-07 17:58 1 条评论 负责人:无 分享
已邀请:

最佳回复

BoringTu

BoringTu (作者)

我研究了一下MUI源码,源码里直接是写死的backgroundColor,而且也并没有暴露出回调入口,也并没有可以外部重写的方式。
估计这问题官方也没啥答复,所以刚刚我把源码改了,亲测有效,现把改动贴出来给有同样问题的童鞋参考:

var Transparent = function(element, options) {  
  
...  
  
// 约 8077 行,Transparent构造函数内  
	this._style = this.element.style;  
	this._bgColor = this._style.backgroundColor;  
	this._opacity = this._style.opacity ? +this._style.opacity : 0;  
	var color = getColor(mui.getStyles(this.element, 'backgroundColor'));  
	if (color.length) {  
		this._R = color[0];  
		this._G = color[1];  
		this._B = color[2];  
		this._A = parseFloat(color[3]);  
		this.lastOpacity = this._A;  
	} else if (this._opacity === 1) {  
		throw new Error("元素背景颜色必须为RGBA");  
	}  
	this._bufferFn = $.buffer(this.handleScroll, this.options.duration, this);  
	this.initEvent();  
  
...  
  
// Transparent.prototype.handleScroll  
Transparent.prototype.handleScroll = function(e) {  
	var y = window.scrollY;  
	if (!this.isNativeScroll && e && e.detail) {  
		y = -e.detail.y;  
	}  
	switch (this.options.transProp) {  
		case 'opacity':  
			var opacity = (y - this.options.top) / this.options.offset + this._opacity;  
			opacity = Math.min(Math.max(this._opacity, opacity), 1);  
			this._style.opacity = opacity;  
			if (opacity > this._opacity) {  
				this.element.classList.add(CLASS_ACTIVE);  
			} else {  
				this.element.classList.remove(CLASS_ACTIVE);  
			}  
			break;  
		case 'backgroundColor':  
		default:  
			var opacity = (y - this.options.top) / this.options.offset + this._A;  
			opacity = Math.min(Math.max(this._A, opacity), 1);  
			this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + opacity + ')';  
			if (opacity > this._A) {  
				this.element.classList.add(CLASS_ACTIVE);  
			} else {  
				this.element.classList.remove(CLASS_ACTIVE);  
			}  
			break;  
	}  
	if (this.lastOpacity !== opacity) {  
		$.trigger(this.element, 'alpha', {  
			alpha: opacity  
		});  
		this.lastOpacity = opacity;  
	}  
};  
  
...  
  
// Transparent.prototype.destory  
Transparent.prototype.destory = function() {  
	this.scrollByElem.removeEventListener('scroll', this._bufferFn);  
	this.scrollByElem.removeEventListener($.EVENT_MOVE, this._bufferFn);  
	if (this._bgColor) this.element.style.backgroundColor = this._bgColor;  
	if (this._opacity) this.element.style.opacity = this._opacity;  
	this.element.mui_plugin_transparent = null;  
};  

调用方式(只需要加一个名为transProp的参数即可):

mui(XXElement).transparent({  
	offset: 120,  
	transProp: 'opacity'	// 可选值:'opacity','backgroundColor'。默认:'backgroundColor'  
})
云创电商

云创电商

你说的应该是沉浸式吧,搜搜,我记得有相关的!

  • BoringTu (作者)

    我就是搜了没搜到才会来问的哇。。。


    而且感觉这跟沉浸不沉浸没关系。。。 囧rz


    2018-05-08 08:51

该问题目前已经被锁定, 无法添加新回复