uniapp:uni-table设置选中样式、uni-td设置字体颜色样式在真机上无效

需求

一个表格,点击表格,某行字体颜色改变;

解决方案

  1. 表格行的点击事件是直接在原生组件里面加的,具体方法参考此处

2.来看下页面结构。

<uni-table>
	<uni-tr>
		<uni-td>
			<view></view>
		</uni-td>
		<uni-td>
			<view></view>
		</uni-td>
	</uni-tr>
</uni-table>

看起来平平无奇,但实际上有很多坑(不排除是因为我缺乏了解不知道正确的方法,毕竟刚上手uniapp没几天)

单元格里面全部用view标签是因为内容稍微有点复杂,感觉我遇到的坑跟我用view填单元格有关系。

2.1 在uni-table里设置全表格字体颜色无效;
2.2 在uni-tr里设置行字体颜色无效,但部分字体样式是生效的;
2.3 在uni-td里写正则动态加载class,会报错,继而改成在里面写一个方法,让方法返回class的名字
2.4 接上一步:

<uni-td :class="setClass()">
   <view></view>
</uni-td>

setClass:function(){
return className;
 }

用这种方式返回class,设置字体颜色color属性,在内置浏览器运行是生效的。

但是在真机上就不生效了,其他属性能生效,color不可以!!!!

经过尝试,把class往view里面塞就可以了。

<uni-td>
   <view :class="setClass()"></view>
</uni-td>

等有空试一下如果里面不写view,用普通的文字是不是就没这个坑了。

上一篇:uni小程序调取腾讯地图+小程序导航路线


下一篇:uni-app动态设置title