UNiapp 微信小程序漸變不生效的解決方案
UNiapp 微信小程序漸變不生效
開(kāi)始用的一直是這個(gè)，調(diào)試一直沒(méi)問(wèn)題，但是重新啟動(dòng)就沒(méi)生效，經(jīng)查詢這個(gè)不適合小程序使用：不適合沒(méi)生效
background-image:linear-gradient(to right, #33f38d8a,#6dd5ed00);
正確使用下面這個(gè)： 生效，適合使用
background-image:linear-gradient(90deg, #33f38d8a 30%, #6dd5ed00 100%)
90deg是指的順時(shí)針旋轉(zhuǎn)角度，比如90deg指的就是由左到右漸變，后面百分值是指顏色比例
180deg指的就是由上到下漸變
補(bǔ)充：【Uniapp小程序】自定義導(dǎo)航欄uni-nav-bar滾動(dòng)漸變色
Uniapp小程序自定義導(dǎo)航欄uni-nav-bar滾動(dòng)漸變色
效果圖
新建activityScrollTop.js作為mixins
export default {
data() {
return {
navBgColor: "rgba(0,0,0,0)", // 初始背景顏色為完全透明
navTextColor: "rgba(0,0,0,1)", // 初始文字顏色
};
},
onPageScroll(e) {
// 設(shè)置背景
const newAlpha = Math.min((e.scrollTop / 100) * 1, 1);
this.navBgColor = `rgba(${this.shadeBackground},${newAlpha})`;
// 設(shè)置文字
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)`;
},
};使用方法
第一步，引入上方j(luò)s
import activityScrollTop from "../../js/activityScrollTop";
export default {
mixins: [activityScrollTop],
}第二步：
關(guān)鍵：backgroundColor和color
<uni-nav-bar :leftIcon="圖標(biāo)" :border="false" @clickLeft="方法名" :backgroundColor="navBgColor" fixed statusBar :color="navTextColor" title="活動(dòng)詳情" ></uni-nav-bar>
第三步：
data
// 漸變導(dǎo)航背景顏色 shadeBackground: "254,181,89", // 漸變導(dǎo)航的文字顏色 shadeTextColor: "255,255,255",
看效果即可！
到此這篇關(guān)于UNiapp 微信小程序漸變不生效的文章就介紹到這了,更多相關(guān)UNiapp 微信小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS中字符問(wèn)題(二進(jìn)制/十進(jìn)制/十六進(jìn)制及ASCII碼之間的轉(zhuǎn)換)
對(duì)于js的進(jìn)制轉(zhuǎn)換的一些方法分析2008-11-11
JS.findElementById()想必大家并不陌生吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
javascript+HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了javascrip+HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下2015-04-04
js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
在操作js或者jquery方面相關(guān)的元素時(shí)，可能會(huì)力不從心，因?yàn)樵谑褂梅椒〞r(shí)可能js的會(huì)更好一點(diǎn)又或者jquery的會(huì)更好一點(diǎn)，真是無(wú)從選擇啊,接下來(lái)將介紹JS/jQuery對(duì)象互轉(zhuǎn)實(shí)現(xiàn),方便你快速操作dom元素，感興趣的朋友可以了解下啊2013-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript使用promise處理多重復(fù)請(qǐng)求
處理重復(fù)請(qǐng)求的文章想必大家也看過(guò)了很多，大多數(shù)都是分為在response返回之前發(fā)現(xiàn)重復(fù)請(qǐng)求就return掉的和使用節(jié)流/防抖來(lái)間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復(fù)請(qǐng)求，感興趣的可以了解一下2021-05-05
js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
TypeScript中索引簽名的實(shí)現(xiàn)示例
索引簽名在TypeScript中用于定義具有動(dòng)態(tài)屬性名的對(duì)象,它允許使用字符串或數(shù)字作為鍵,并可以限制鍵和值的類(lèi)型,下面就來(lái)詳細(xì)的介紹一下TypeScript中索引簽名,感興趣的可以了解一下2026-01-01
詳細(xì)分析jsonp的原理和實(shí)現(xiàn)方式
給大家圖文詳細(xì)分析一下jsonp的原理以及跨域問(wèn)題的匯總。2017-11-11