【报Bug】导航栏透明渐变效果跟mui-scroll-wrapper冲突

分类：MUI

bug提交

详细问题描述
[内容]
我使用demo里面的导航栏-渐变效果mui-bar-transparent，当我给页面内容区域加上
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll">
</div>
</div>
之后，在安卓手机上渐变效果还是可以实现的，但是在iphone 5S上渐变效果就失效了，在浏览器上滚动也没有了标题栏渐变效果，手头上没有其他苹果手机，但是估计苹果手机在使用mui-bar-transparent时如果使用mui-scroll-wrapper也是渐变效果无效

2016-08-09 09:59 负责人:无分享

7 个回复

奶油小棒子

重写一下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 ')';
}
};

奶油小棒子

补充一下，this.options.scroll是mui.fn.scroll()返回的对象

2016-08-23 09:02
孤独的前行者 (作者)

回复奶油小棒子:直接把这段代码复制到JS里面就可以吗

2016-08-26 12:56
孤独的前行者 (作者)

回复奶油小棒子:你好，我试了还是不知道怎么使用你的代码，请问可以教一下吗

2016-08-27 14:57

奶油小棒子

回复孤独的前行者:rgba第四个参数是透明度，网页里的阈值是0-1之间，这个值他是通过(window.scrollY - this.options.top) / this.options.offset得出来的，window.scrollyY是浏览器滚动条的垂直位移量，options.top和options.offset是自己可以传递的参数，默认值源码里有。

MUI自己这个滚动条插件应该是div滚动，反正不是浏览器滚动，css我懂得也不是很多。

总得来说，你调试下这个handleScroll函数就可以知道，window.scrollY一直都是为0，你可以把这个值换一下就行了，我代码里的options.scroll.y是我传递过来的值，options.scroll是mui滚动插件对象，也就是mui.scroll()，y应该就是他的一个垂直位移的值，我也没仔细看。

;(function($, window) {

var rgbaRegex = /^rgba((\d{1,3}),\s(\d{1,3}),\s(\d{1,3}),\s*(\d{1,3}))$/;

var getColor = function(colorStr) {

var matches = colorStr.match(rgbaRegex);

if (matches && matches.length === 5) {

return [

matches[1],

matches[2],

matches[3],

matches[4]

];

}

return [];

};

var Transparent = function(element, options) {

this.element = element;

this.options = $.extend({

top: 0,

offset: 150,

duration: 16

}, options || {});

this._style = this.element.style;

this._bgColor = this._style.backgroundColor;

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 = color[3];

this._bufferFn = $.buffer(this.handleScroll, this.options.duration, this);

this.initEvent();

} else {

throw new Error("元素背景颜色必须为RGBA");

}

};

Transparent.prototype.initEvent = function() {  

    window.addEventListener('scroll', this._bufferFn);  

    window.addEventListener($.EVENT_MOVE, this._bufferFn);  

};  

Transparent.prototype.handleScroll = function() {  

    if (typeof this.options.scroll === 'undefined') {  

        var a = (window.scrollY - this.options.top) / this.options.offset;  

        if (a > 0.85){  

            a = 0.85;  

        }  

        this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + a + ')';  

    } else {  

        var a = (this.options.top - this.options.scroll.y) / this.options.offset;  

        if (a > 0.85){  

            a = 0.85;  

        }  

        this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + a + ')';  

    }  

};  

Transparent.prototype.destory = function() {  

    window.removeEventListener('scroll', this._bufferFn);  

    window.removeEventListener($.EVENT_MOVE, this._bufferFn);  

    this.element.style.backgroundColor = this._bgColor;  

    this.element.mui_plugin_transparent = null;  

};  

$.fn.transparent = function(options) {  

    options = options || {};  

    var transparentApis = [];  

    this.each(function() {  

        var transparentApi = this.mui_plugin_transparent;  

        if (!transparentApi) {  

            var top = this.getAttribute('data-top');  

            var offset = this.getAttribute('data-offset');  

            var duration = this.getAttribute('data-duration');  

            if (top !== null && typeof options.top === 'undefined') {  

                options.top = top;  

            }  

            if (offset !== null && typeof options.offset === 'undefined') {  

                options.offset = offset;  

            }  

            if (duration !== null && typeof options.duration === 'undefined') {  

                options.duration = duration;  

            }  

            transparentApi = this.mui_plugin_transparent = new Transparent(this, options);  

        }  

        transparentApis.push(transparentApi);  

    });  

    return transparentApis.length === 1 ? transparentApis[0] : transparentApis;  

};  

$.ready(function() {  

    $('.mui-bar-transparent').transparent();  

});

})(mui, window);

这是使用代码

2016-09-02 10:50

Eason

回复奶油小棒子:回答很有用，谢谢~

2016-09-22 10:12
奶油小棒子

回复 Eason:那就点赞啊-.-

2016-09-23 10:53
Eason

回复奶油小棒子:哈哈，之前找了半天赞同没看到在哪，只找到送分感谢

2016-09-23 11:32
Eason

回复奶油小棒子:你重写mui.plusReady()的方法里，又初始化里一遍.scroll控件，和页面内mui.init初始化重复了，导致滚动出问题了，有什么更好的解决方案吗？

2016-09-23 15:39
奶油小棒子

回复 Eason:不大明白什么意思，详细点。

2016-09-27 14:33
2***@qq.com

回复奶油小棒子:我猜他应该是说在下拉刷新里用这个透明导航条的效果，下拉刷新是默认初始化scroll控件的....这样咋办呢？

2016-11-02 14:36
距离您98米

回复 Eason:导致滚动出问题，解决了吗？

2017-07-25 17:31