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

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

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