当前位置: 首页 > news >正文

关于uviewui修改主题及在uniapp中的应用

在uview使用过程中遇到很多不方便的地方,记录下来

修改主题颜色

给UI框架换个主题色基础方法是覆盖原有色(但这个方法比较笨,处理起来也不干净利索),所以换个思路改变基础色值变量,步骤主要分为2部分:

1.修改样式中的颜色变量(一般大家都清楚);
2.修改由js 生成的dom的样式变量;

那么在uviewui的基础上具体操作如下:

/*
# 1.修改css的基础变量:
# 官方说明中:在项目src目录的uni.scss中引入 @import 'uview-ui/theme.scss'; 。
# 修改主题可以取消上面步骤的引入,直接到node_modules中找到 uview-ui/theme.scss 文件将内容复制到 uni.scss 中,这样就可以直接修改颜色变量了。#2.修改框架由 js 操作而生成的样式
# 官方文档中:在项目src目录中的main.js中引入了uview 的js主库
# 那么我们可以直接在引入主库后通过uni.$u.setConfig({})方法修改js库中的颜色变量
*/
// main.js 
import uView from "uview-ui";
Vue.use(uView);
// 上面是引入 uview 主库的2句代码uni.$u.setConfig({color: {	// color这里的目的是修改基础颜色但测试中暂未知效果,这里先列出来'u-primary': '#ff8500',...},props:{tabs: {lineColor: '#19be6b'	// 示例修改tabs 的激活颜色}}
})// 那么哪些js变量支持修改呢? 下面列出一下自己使用过的可用的,欢迎留言补充
uni.$u.props.tabs.lineColor = '#112200' //示例修改tabs 的激活颜色, 效果同上方式 
http://www.lryc.cn/news/215015.html

相关文章:

  • 使用QEMU模拟启动uboot
  • 学习数据结构和算法之前,你需要知道什么?
  • 16. 机器学习 - 决策树
  • 将多余的内存,当作虚拟内存。修改edge缓存路径到虚拟内存中
  • 【从0到1设计一个网关】过滤器链的实现---实现负载均衡过滤器
  • 科技云报道:打造生成式AI应用,什么才是关键?
  • 可回馈式电子负载的工作原理
  • 基于Vite使用VitePress搭建静态站点博客
  • 湖南互联网医院-让患者随时随地接受医疗服务
  • 【建议收藏】免费体验的AI论文写作网站-「智元兔 AI」
  • CUDA编程
  • gorilla/websocket的chat示例代码简单分析
  • 地图坐标展示工具folium
  • Ruby 之方法委托
  • [论文笔记]RetroMAE
  • 服务熔断保护实践--Sentinal
  • 页面淘汰算法模拟实现与比较
  • FPGA实现HDMI转LVDS视频输出,纯verilog代码驱动,提供4套工程源码和技术支持
  • JAVA-easyexcel多sheet页导入
  • Java——比较器(一文搞懂比较器Comparable和Comparator)
  • 企业直播招聘抖音报白如何实现?怎么样才能报白成功?
  • 【考研数学】概率论与数理统计 —— 第七章 | 参数估计(2,参数估计量的评价、正态总体的区间估计)
  • 【设计模式】第10节:结构型模式之“组合模式”
  • 改进YOLOv3!IA-YOLO:恶劣天气下的目标检测
  • Vue路由跳转的几种方式
  • TiDB x 汉口银行丨分布式数据库应用实践
  • uci机器学习数据库简介
  • 多人协作使用git如何解决冲突?
  • 基于【逻辑回归】的评分卡模型金融借贷风控项目实战
  • 企业拉美跨境出海面对时延情况怎么办?