微信小程序中uni-table行动态改变颜色

可以通过在 uni-table 组件上绑定 v-for 来实现不同行的颜色变化。

步骤如下：

1定义 data 属性，其中 colorArr 存放的是颜色字段：

data () {

return {

list: [],

colorArr: ['#f00', '#0f0', '#00f', '#fff']

}

},

2在 uni-table 组件上绑定 v-for

<uni-table-column v-for="(item, index) in rowlist"

:key="index"

:type="itemtype"

:label="itemlabel"

:width="itemwidth"

:align="itemalign"

:show-overflow-tooltip="itemshowOverflowTooltip"

:class="['cell-type-'+itemtype, {'bg-light': rowtype=='light'}]"

:style="{backgroundColor: colorArr[index]}"

>

{{ itemvalue }}

</uni-table-column>

上述代码在 uni-table 组件上绑定 v-for 来循环 list，在 uni-table-column 标签上传递行索引index 即可动态改变单元格的背景颜色。另外，也可以给 uni-table-column 标签设置其他的样式。

项目的需求是: 根据后台返回的配色信息,前端根据返回配色信息进行配色全局引用到小程序

百度和Google查了一番,都只查到用添加类的方式,但是不满足需求,因为类里面的颜色都是写死的,我是想要样式动态,最后无奈想到全局变量的方式解决切换主题

具体实现:(在appjs文件中将小程序主题加载完成)

改变tabbar(我这里只改的图标颜色,如需改变背景色,可添加修改背景样式进行修改)

页面实现改变主题色:

组件中实现改变主题色:(大致都是一样的处理方式)

总结: 这种方法虽可以改变主题,但是也是有缺陷,比如每个页面去添加行内样式和每个页面去改变导航栏主题色,都是比较繁琐和麻烦的,而且页面改变导航栏主题色的时候,会有瞬间闪屏(真机上展示效果比编辑器好多了,所以闪屏问题还算能接受),但最后实现了项目需求,也还不错如你有更好的的方式方法,请留言告知,相互学习才能更快进步

以上就是关于微信小程序中uni-table行动态改变颜色全部的内容，包括:微信小程序中uni-table行动态改变颜色、微信小程序 切换主题色、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！