亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2024年07月22日 11:02:32   作者：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 微信小程序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論