小程序鼠标点击按钮（改变背景颜色字体-active的运用）

目标需求：实现下图，给点击的view增加类，每次只能选择一个。

主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该view增加类。

效果演示：

wxml

wxss

js

可以通过在 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 标签设置其他的样式。

1首先,在电脑上打开微信开发者工具并进行登录。

2然后,点击工具栏上的“设置”。

3在d出的选项栏中,点击“外观设置”

4在外观设置界面中,将主题下面的颜色改为“浅色”。

以上就是关于小程序鼠标点击按钮（改变背景颜色字体-active的运用）全部的内容，包括:小程序鼠标点击按钮（改变背景颜色字体-active的运用）、微信小程序中uni-table行动态改变颜色、为什么微信小程序没有颜色等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！