透明渐变
17 人关注该话题
有支持元素透明渐变的插件吗 透明渐变
1***@qq.com 2024-11-17 12:37 发起问题 • 1 人关注 • 0 个回复 • 45 次浏览
当app页面设置滚动透明渐变导航时,导航栏出现前,区域无法触发点击事件
透明渐变
导航栏
uni_app
负责人:DCloud_App_Array
黑色瓶子 2023-03-01 12:27 发起问题 • 1 人关注 • 0 个回复 • 264 次浏览
uni app 渐变透明iPhone下如何在顶部下拉的时候让图片变大而不是变成空白 透明渐变
吃藕 2021-06-15 09:43 回复问题 • 2 人关注 • 2 个回复 • 408 次浏览
使用原生透明渐变标题栏的前提下,如何使用下拉刷新上拉加载? HTML5+ 下拉刷新 透明渐变
DCloud_App_Array 2020-05-18 20:04 回复问题 • 1 人关注 • 1 个回复 • 592 次浏览
求问大佬,为什么导航栏透明渐变不生效了... 导航栏 透明渐变
一入前端深似海 2020-03-25 10:44 发起问题 • 1 人关注 • 0 个回复 • 564 次浏览
设置原生导航栏和buttons都为纯透明后,这时buttons的字体颜色为白色,如何保持自己设置的颜色。求解! uniapp 透明渐变 导航栏
Alaric 2019-06-28 10:03 发起问题 • 1 人关注 • 0 个回复 • 1072 次浏览
当导航栏设置为透明渐变导航栏时如何取消默认的返回按钮或者去除灰色半透明的背景? 返回按键 透明渐变 导航栏
Alaric 2019-06-28 08:49 回复问题 • 3 人关注 • 1 个回复 • 1779 次浏览
自定义导航栏搜索框透明问题 透明渐变
3***@qq.com 2018-12-10 09:31 发起问题 • 1 人关注 • 0 个回复 • 1996 次浏览
透明渐变样式的设置影响标题栏的颜色设置?? 透明渐变 uniapp
l***@126.com 2018-12-04 21:51 回复问题 • 1 人关注 • 2 个回复 • 1865 次浏览
导航栏透明渐变效果跟mui-scroll-wrapper冲突了 透明渐变
MUI_Charles 2018-11-13 11:41 回复问题 • 3 人关注 • 3 个回复 • 5461 次浏览
MUI 标题栏渐变 怎样让整个标题渐变,而不仅仅是标题栏的背景颜色? 标题栏 mui 透明渐变
BoringTu 2018-05-08 10:22 回复问题 • 2 人关注 • 2 个回复 • 3363 次浏览
有没有监听惯性滚动中的方法 透明渐变 事件 滚动
1***@qq.com 2017-12-15 13:52 回复问题 • 1 人关注 • 1 个回复 • 1439 次浏览
下载示例后,将其复制到 hello mui 示例工程的根目录下,即可预览效果。
下载示例后,将其复制到 hello mui 示例工程的根目录下,即可预览效果。
赞同来自: Trust
估计这问题官方也没啥答复,所以刚刚我把源码改了,亲测有效,现把改动贴出来给有同样问题的童鞋参考:
``` js
var T... 显示全部 »
估计这问题官方也没啥答复,所以刚刚我把源码改了,亲测有效,现把改动贴出来给有同样问题的童鞋参考:
``` js
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`的参数即可):
``` js
mui(XXElement).transparent({
offset: 120,
transProp: 'opacity' // 可选值:'opacity','backgroundColor'。默认:'backgroundColor'
})
```
原生版本透明渐变导航条使用教程 透明渐变 transparent
pk发型不乱2019-09-26 15:33 评论文章 • 35 个评论 • 34342 次浏览