当前位置: 首页>后端>正文

记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程

uniapp自带页面的下拉刷新功能,详见官方文档

大致实现方式如下:
在pages.json中将要实现下拉刷新功能的页面添加enablePullDownRefresh: true,并且可在此处设置样式,也可全局设置样式


记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第1张
pages.json中局部设置下拉刷新图标的颜色

记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第2张
pages.json中全局修改所有下拉刷新图标的颜色

在做到项目需求中,下拉刷新默认颜色样式是绿色的,由于该项目涉及不同品牌不同风格样式,也就意味着下拉刷新需要根据编译的不同条件来使用不同的样式,否则就需要每次打包时去手动修改一下样式


记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第3张
默认样式

首先是尝试动态修改pages.json的内容,但官方只提供了修改tabbar的api,并没有办法或者直接修改pages.json中的其他内容。
想到可能可行的方法是在编译打包前使用node方法去重写pages.json,但由于该需求动态修改的只有一个下拉刷新图标的颜色修改这样一个小改动,使用node去重写文件有些过于麻烦,所以考虑放弃,后续可以去尝试一下

于是采用了其他方法,直接修改页面样式

记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第4张
浏览器编译后的css

可以看到下拉刷新的图标用到了两个svg,那么也就意味着,可以使用css直接对两个svg的颜色进行修改
记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第5张
css修改svg

实现效果


记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第6张
品牌1

记录解决关于如何动态修改uniapp下拉刷新加载图标颜色的过程,第7张
品牌2

https://www.xamrdz.com/backend/3fq1932786.html

相关文章: