uniapp修改picker-view样式

解决问题：

1.选中文案样式，比如字体颜色

2.修改分割线颜色

3.多列时，修改两边间距让其平分

展示效果：

代码如下

<template><u-popup :show="showPicker" :safeAreaInsetBottom="false" @close="close"><view class="title-box"><view class="title">{{title}}</view><text class="iconfont icon-guanbidankuang" @click="close"></text></view><picker-view class="picker-view" indicator-class="picker-selected" immediate-change :value="innerIndex"@change="changeHandler"><picker-view-column><view class="item" :class="columns2.length==0||columns3.length==0?'first-item':'col1'"v-for="(item, index) in columns" :key="index"><!-- 设置选中文字样式class --><view :class="columns[innerIndex[0]].text==item.text?'selected-text':''">{{item.text}}</view></view></picker-view-column><picker-view-column v-if="columns2&&columns2.length>0"><view class="item" v-for="(item, index) in columns2" :key="index"><view :class="columns2[innerIndex[1]].text==item.text?'selected-text':''">{{item.text}}</view></view></picker-view-column><picker-view-column v-if="columns3&&columns3.length>0"><view class="item" v-for="(item, index) in columns3" :key="index"><view :class="columns3[innerIndex[2]].text==item.text?'selected-text':''">{{item.text}}</view></view></picker-view-column></picker-view><view class="btn-box"><view class="btn" @click="close('submit')">确定</view></view></u-popup>
</template><script>export default {data() {return {innerIndex: [0, 0, 0],showPicker: false,currentData: [],previousValue: [0, 0, 0] // 用于保存之前的选中值}},props: {columns: {type: Array,default: []},columns2: {type: Array,default: []},columns3: {type: Array,default: []},show: {type: Boolean,default: false},title: {type: String,default: '请选择'},selectIndex: {type: Array,default: []}},watch: {show: function() {this.showPicker = this.show},selectIndex() {this.innerIndex = this.selectIndex}},mounted() {if (this.selectIndex && this.selectIndex.length > 0) {this.innerIndex = this.selectIndex}this.currentData = [this.columns[this.innerIndex[0]], this.columns2.length > 0 ? this.columns2[this.innerIndex[1]] : {}, this.columns3.length >0 ? this.columns3[this.innerIndex[2]] : {}]// console.log(this.currentData);},methods: {changeHandler(e) {const that = thisuni.vibrateShort({complete() {console.log(e);that.innerIndex = e.detail.valueconst previousValue = that.previousValue;// 判断哪一列发生了变化for (let i = 0; i < that.innerIndex.length; i++) {if (that.innerIndex[i] !== previousValue[i]) {// console.log(`第 ${i + 1} 列发生了变化`);that.$emit('changeIndex', i + 1)break;}}that.previousValue = that.innerIndexthat.currentData = [that.columns[e.detail.value[0]], that.columns2.length > 0 ? that.columns2[e.detail.value[1]] : {},that.columns3.length > 0 ? that.columns3[e.detail.value[2]] : {}]// that.currentData = that.columns[e.detail.value[0]]}})},close(type) {// this.showPicker = falseif (type === 'submit') {console.log(this.currentData);this.$emit('submit', this.currentData)} else {this.$emit('close', true)}}}}
</script><style lang="scss" scoped>.title-box {padding: 28rpx 0;display: flex;justify-content: center;align-items: center;.title {font-weight: 500;font-size: 32rpx;}.icon-guanbidankuang {font-size: 60rpx;position: absolute;right: 40rpx;}}.picker-view {height: 480rpx;margin-bottom: 34rpx;margin-top: 48rpx;padding: 0 60rpx;.item {// line-height: 96rpx;// text-align: center;font-size: 28rpx;display: flex;align-items: center;justify-content: flex-end;}.first-item {justify-content: center;}.col1 {justify-content: flex-start;}}.btn-box {padding: 12rpx 24rpx;z-index: 9;box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.1);padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);.btn {border-radius: 20rpx;background: $primary-color;height: 74rpx;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 28rpx;letter-spacing: 0.84rpx;font-weight: 600;}}
</style>
<style>.picker-selected {height: 96rpx;}.picker-selected::before {content: '';position: absolute;top: 0;border: 2rpx solid #FAFAFA;}.selected-text {font-weight: 500;}.picker-selected::after {content: '';position: absolute;bottom: 0;border: 2rpx solid #FAFAFA;}
</style>

引用，省略数据填充

<template><selection-picker v-if="columnsTime.length>0" :show="showTime" :columns="columnsTime" :selectIndex="selectIndex" :columns2="columnsTime2" :columns3="columnsTime3" title="请选择出发时间" @close="showTime=false" @submit="getTime"></selection-picker>
</template><button @click="showTime=true">打开</button><script>export default {data() {return {showTime: false}}}
</script>