详细问题描述
transparent 在mui-scroll-warpper存在时不起作用
重现步骤
<header id="header" class="mui-bar mui-bar-transparent">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">导航栏</h1>
</header>
<div class="mui-content mui-scroll-warpper">
<div class="mui-scroll">
...
</div>
</div>此时mui-bar-transparent的透明渐变导航未生效
BoredApe - 有问题就会有答案。
<header id="header" class="mui-bar mui-bar-nav mui-bar-transparent">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">导航栏</h1>
</header>少了#mui-bar-nav
重写一下Transparent，其中的handleScroll 改成：
Transparent.prototype.handleScroll = function() {
if (this.options.scroll === "undefined") {
this._style.backgroundColor = 'rgba(' this._R ',' this._G ',' this._B ',' (window.scrollY - this.options.top) / this.options.offset ')';
} else {
this._style.backgroundColor = 'rgba(' this._R ',' this._G ',' this._B ',' (this.options.top - this.options.scroll.y) / this.options.offset ')';
}
};
发现一个更好的方法，从API中找到，透明度变化时会触发一个alpha自定义事件
$(".mui-bar-transparent").on("alpha", function(evt) {
var alpha= evt.detail.alpha
//当前获得标题栏透明度，而且是变化时触发
});
header元素改成<header id="header" class="mui-bar mui-bar-transparent" data-transparent=".mui-content">就可以了。
如果.mui-content有轮播图的话会触发scroll事件，y值为0，导致header又变成透明，故Transparent.prototype.handleScroll方法要改成以下
Transparent.prototype.handleScroll = function(e) {
var y = window.scrollY;
if (!this.isNativeScroll && e && e.detail) {
if(e.detail.direction){
//不是由滚动条滚动触发的scroll事件暂不做处理
y = -e.detail.y;
}else{
return;
}
}
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);
}
if (this.lastOpacity !== opacity) {
$.trigger(this.element, 'alpha', {
alpha: opacity
});
this.lastOpacity = opacity;
}
};
楼上各位的我都试过了，都是没啥效果的。。
我就自己改了一下源码，亲测有效，兼容官方demo那种纯净模式，以及 .mui-scroll-wrapper 模式：
// 约8100行
Transparent.prototype.handleScroll = function(e) {
if (e.type !== 'scroll') return; // 新增（因为无论当前event是默认Event还是mui的CustomEvent，其type值都是'scroll'，还有一种情况是TouchEvent，但此event没有type值，所以仅靠event.type是否是'scroll'就可以屏蔽掉TouchEvent的情况了
var y = window.scrollY;
//if (!this.isNativeScroll && e && e.detail) { // 删掉
if (e && e.detail) { // 新增
y = -e.detail.y;
}
...
DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001
h***@sina.com (作者)
您好，尝试增加了mui-bar-nav，透明渐变依然未生效
看了一下，mui-bar-nav主要就是对mui-content增加了padding-top: 44px; 属性；对header增加了top:0；没有js的处理
我是仿照examples/nav_transparent.html的header写的
2016-06-13 02:56
h***@sina.com (作者)
您好，增加mui-scroll-warpper和mui-scroll之后，
Transparent.prototype.handleScroll 这个函数中window.scrollY一直为0，不知道是什么原因
2016-06-13 03:01
距离您98米
回复 h***@sina.com:解决了吗？
2017-07-25 17:36