uniapp中修改picker-view样式及选中行的文字颜色

问题描述及解决方法

uniapp：在使用picker-view组件时，有些样式需要自定义，可以参考官方文档添加类名；但是无法修改选中行的字体颜色，后面解决方法就是通过动态添加类名的方式，给选中项添加类名。
value是一个数组，第一项value[0]就是选中行的索引值，如果当前索引=选中行的索引则添加类名，否则不添加。

如下代码：HTML部分

<picker-view v-if="visible" :mask-style="mask" :value="value" @change="bindChange" class="picker-view">
			<picker-view-column>
			// value[0]选中行的索引，index当前项的索引
				<view :class=" value[0] ==  index ? ' pickerSelected ' : ' ' "  v-for="(item,index) in Arr " :key="item.id">
					{{item.label}}---{{index}}
				</view>
			</picker-view-column>
		</picker-view>

JS部分：

<script>
	export default {
		data() {
			return {
				Arr: [{
					label: 123,
					id: 1
				}, {
					label: 123,
					id: 2
				}, {
					label: 123,
					id: 3
				}],
				value: [99],
				visible: true,
				mask: `background:none;` // 去掉遮罩层背景色
			}
		},
		methods: {
			bindChange(e) {
				this.value = e.detail.value  // 注意这行一定要加上，否则判断的两个索引的值永远不会相等
				console.log(e.detail.value[0])
			}
		}
	}
</script>

CSS部分

<style>
	page {
		background-color: skyblue;
	}

	/deep/ .picker-box {
		height: 40px;
		line-height: 40px;
		background: rgba(255, 255, 255, 0.25);
	}

	.pickerSelected {
		color: rgba(255, 255, 255, 1);
	}

.picker-view {
		width: 100%;
		height: 200px;
		color: rgba(255, 255, 255, 0.5);
		text-align: center;
	}

	view {
		line-height: 40px;
	}
</style>

最后的效果