我研究了一下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'
})
2 个回复
最佳回复
BoringTu (作者)
我研究了一下MUI源码,源码里直接是写死的
backgroundColor
,而且也并没有暴露出回调入口,也并没有可以外部重写的方式。估计这问题官方也没啥答复,所以刚刚我把源码改了,亲测有效,现把改动贴出来给有同样问题的童鞋参考:
调用方式(只需要加一个名为
transProp
的参数即可):云创电商
你说的应该是沉浸式吧,搜搜,我记得有相关的!
BoringTu (作者)
我就是搜了没搜到才会来问的哇。。。
而且感觉这跟沉浸不沉浸没关系。。。 囧rz
2018-05-08 08:51