UNiapp 微信小程序渐变不生效的解决方案
作者：zwj的CS-DN
这篇文章主要介绍了UNiapp 微信小程序渐变不生效的解决方案,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
UNiapp 微信小程序渐变不生效
开始用的一直是这个，调试一直没问题，但是重新启动就没生效，经查询这个不适合小程序使用：不适合没生效
background-image:linear-gradient(to right, #33f38d8a,#6dd5ed00);
正确使用下面这个： 生效，适合使用
background-image:linear-gradient(90deg, #33f38d8a 30%, #6dd5ed00 100%)
90deg是指的顺时针旋转角度，比如90deg指的就是由左到右渐变，后面百分值是指颜色比例
180deg指的就是由上到下渐变
补充：【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色
Uniapp小程序自定义导航栏uni-nav-bar滚动渐变色
效果图
新建activityScrollTop.js作为mixins
export default {
data() {
return {
navBgColor: "rgba(0,0,0,0)", // 初始背景颜色为完全透明
navTextColor: "rgba(0,0,0,1)", // 初始文字颜色
};
},
onPageScroll(e) {
// 设置背景
const newAlpha = Math.min((e.scrollTop / 100) * 1, 1);
this.navBgColor = `rgba(${this.shadeBackground},${newAlpha})`;
// 设置文字
const progress = Math.min(e.scrollTop, 255) / 255;
const [r, g, b] = this.shadeTextColor.split(",").map(Number);
const newTextRgb = Math.min(e.scrollTop * 5, 255);
const newRgb = [r, g, b].map((targetValue) => {
return Math.min(newTextRgb + (targetValue - newTextRgb) * progress, 255);
});
this.navTextColor = `rgba(${newRgb.join()},1)`;
},
};使用方法
第一步，引入上方js
import activityScrollTop from "../../js/activityScrollTop";
export default {
mixins: [activityScrollTop],
}第二步：
关键：backgroundColor和color
<uni-nav-bar :leftIcon="图标" :border="false" @clickLeft="方法名" :backgroundColor="navBgColor" fixed statusBar :color="navTextColor" title="活动详情" ></uni-nav-bar>
第三步：
data
// 渐变导航背景颜色 shadeBackground: "254,181,89", // 渐变导航的文字颜色 shadeTextColor: "255,255,255",
看效果即可！
到此这篇关于UNiapp 微信小程序渐变不生效的文章就介绍到这了,更多相关UNiapp 微信小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！