关于uviewui修改主题及在uniapp中的应用-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于uviewui修改主题及在uniapp中的应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

修改主题颜色

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

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

那么在uviewui的基础上具体操作如下:文章来源地址https://www.toymoban.com/news/detail-738745.html

/*
# 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 的激活颜色， 效果同上方式