EmmenCao
EmmenCao
  • 发布:2016-11-21 18:50
  • 更新:2016-11-30 10:01
  • 阅读:2793

下拉菜单和mui-bar-transparent 一起不渐变bg的问题

分类:MUI

如图:
是否因为mui的下拉加载改变的是style.transform,无法触发头部渐变。

求解决方案。

2016-11-21 18:50 1 条评论 负责人:无 分享
已邀请:
EmmenCao

EmmenCao (作者)

已按照http://ask.dcloud.net.cn/question/25114 解决

EmmenCao

EmmenCao (作者)

修改了一些,解决了1.判断undefined 错误,2. 重复创建Sroll对象,导致页面卡的问题。
代码:
mui.js 重写:


Transparent.prototype.handleScroll = function () {
if(typeof(this.options.scroller) === "undefined") {
this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + (window.scrollY - this.options.top) / this.options.offset + ')';
} else {
var sender = mui(this.options.scroller)[0];
var scroller = sender.firstChild;
if(scroller.style.transform != "") {
var scrollTop = Math.abs(parseInt(scroller.style.transform.split(",")[1].replace("px", ""), 10));
this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + (scrollTop - this.options.top) / this.options.offset + ')';
}
}
};


调用:
mui('.mui-bar-transparent').transparent({
scroller: "#pullrefresh",
offset: 150
});

EmmenCao

EmmenCao (作者)

Transparent.prototype.handleScroll = function () {  
    if(typeof(this.options.scroller) === "undefined") {  
        this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + (window.scrollY - this.options.top) / this.options.offset + ')';  
    } else {  
        var sender = mui(this.options.scroller)[0];  
        var scroller = sender.querySelector(".mui-scroll");  
        if(scroller.style.transform != "") {  
            var scrollTop = Math.abs(parseInt(scroller.style.transform.split(",")[1].replace("px", ""), 10));  
            this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + (scrollTop - this.options.top) / this.options.offset + ')';  
        }  
    }  
};

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

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容