微信小程序中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 row.list"

:key="index"

:type="item.type"

:label="item.label"

:width="item.width"

:align="桐陵item.align"

:show-overflow-tooltip="item.showOverflowTooltip"

:class="['cell-type-'+item.type, {'bg-light': row.type=='指轮薯light'}]"

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

>

{{ item.value }}

</uni-table-column>

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

看别人的项目有这样一种设定，一进来没有导航栏只有返回按钮，胶囊颜色为黑色半透明，局袜此等滑动到一定高度以后导航栏出现，胶囊变成白色。

需要在js里面用到桐迅 wx.setNavigationBarColor，它有两个参数一起设定可以改变胶囊颜色，需要注意颜色要用十六进制

如果是指定页面胶囊颜色，之后不做改变，可以直接在json文件里面配置：好铅

附带监听页面滚动，滑动到某一节点位置时改变胶囊颜色的方法：

我用的是自定义导航栏，需要在json里面配置一下：

在app.js里面设置全局变量navHeight，动态计算导航栏高度：

onLaunch里面：

需要自定义导航栏页面的wxml文件：

js文件:

wxss文件:

再调用监听页面滚动的方法就能动态显示隐藏导航栏。

---