欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

UNiapp 微信小程序漸變不生效的解決方案

 更新時(shí)間：2024年07月22日 11:02:32   作者：zwj的CS-DN  
這篇文章主要介紹了UNiapp 微信小程序漸變不生效的解決方案,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

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)文章

最新評(píng)論