uniapp开发微信小程序picker-view 组件修改选中框的样式

在项目中，很多人会遇到选择时间、地点、类别等需求，需要自定义选择器，那么这个选择框避免不要要改样式

1. 要在picker-view上加 

   indicator-class="picker-box"

2. 修改的样式为

    /deep/ .picker-box {
       width: 100%;
       height: 99rpx;
       background-color: rgba(26, 176, 104, 0.1);
       z-index: 1;
     }
     //给选中的添加border-radius
     /deep/ .view-column.second .picker-box {
       border-radius:0 20rpx 20rpx 0;
     }
     /deep/ .view-column.first .picker-box {
       border-radius: 20rpx 0 0 20rpx;
     }
     // 修改原有的上下边框颜色
     /deep/ .picker-box::after {
       border-bottom: 0 solid rgba(26, 176, 104, 0.1);
     }
     /deep/ .picker-box::before {
       border-top: 0 solid rgba(26, 176, 104, 0.1);
     }

   完整代码如下

   <template>
     <u-popup :show="show" @close="close" :round="20">
       <view class="change-date-modal">
         <view class="change-date-modal-header">
           <view class="change-date-modal-header-title">选择日期</view>
           <view class="change-date-modal-header-icon" @click="close">
             <uni-icons color="#D9D4D4" type="closeempty" size="20"></uni-icons>
           </view>
         </view>
         <picker-view indicator-class="picker-box" class="change-date-modal-picker" :value="dateValue"
                      @change="change" >
           <picker-view-column class="view-column first">
             <view class="change-date-modal-picker-item" v-for="(item,index) in yearArr"
                   :key="index" :class="{
                     'change-date-modal-picker-item-checked':index===dateValue[0]
                   }" >{{ item }}年
             </view>
           </picker-view-column>
           <picker-view-column class="view-column second">
             <view class="change-date-modal-picker-item" v-for="(item,index) in monthArr"
                   :class="{
                     'change-date-modal-picker-item-checked':index===dateValue[1]
                   }"
                   :key="index">{{ item }}月
             </view>
           </picker-view-column>
         </picker-view>
         <view class="change-date-modal-button" @click="sure">确定</view>
       </view>
     </u-popup>
   </template>
   
   <script>
   export default {
     name: "change-date-modal",
     props: {
       defaultDate: {
         type: Array,
         default: () => []
       }
     },
     data() {
       return {
         yearArr: [],
         monthArr: [],
         dateValue: [0, 0],
         show: false
       }
     },
     created() {
       const date = new Date();
       const yearList = [], monthList = [];
       for (let i = 2020; i <= date.getFullYear(); i++) {
         yearList.push(i);
       }
       for (let i = 1; i <= 12; i++) {
         monthList.push(i);
       }
       this.yearArr = yearList;
       this.monthArr = monthList;
     },
     methods: {
       close() {
         this.show = false;
       },
       change(e) {
         this.dateValue = e.detail.value;
       },
       open() {
         this.dateValue = [this.yearArr.indexOf(this.defaultDate[0]), this.monthArr.indexOf(this.defaultDate[1])];
         this.show = true;
       },
       sure() {
         const list = [this.yearArr[this.dateValue[0]],this.monthArr[this.dateValue[1]]]
         this.$emit("sure",list)
         this.show=false
       }
     }
   }
   </script>
   
   <style scoped lang="scss">
   @import "@/css/variable.scss";
   
   .change-date-modal {
     width: 100vw;
   
     &-header {
       @include flex-center;
       width: 100%;
       border-radius: 20rpx 20rpx 0 0;
       height: 88rpx;
       background: #F8F8F8;
   
       &-title {
         font-size: 28rpx;
         font-weight: 500;
         color: rgba(56, 56, 56, 1);
       }
   
       &-icon {
         position: absolute;
         right: 34rpx;
       }
     }
   
     &-picker {
       width: 100%;
       height: 600rpx;
       box-sizing: border-box;
       padding: 0 40rpx;
       &-item {
         font-size: 32rpx;
         font-weight: 400;
         color: rgba(128, 128, 128, 1);
         text-align: center;
         line-height: 99rpx;
       }
       &-item-checked{
         color: rgba(26, 176, 104, 1);
       }
     }
   
     /deep/ .picker-box {
       width: 100%;
       height: 99rpx;
       background-color: rgba(26, 176, 104, 0.1);
       z-index: 1;
     }
     //给选中的添加border-radius
     /deep/ .view-column.second .picker-box {
       border-radius:0 20rpx 20rpx 0;
     }
     /deep/ .view-column.first .picker-box {
       border-radius: 20rpx 0 0 20rpx;
     }
     // 修改原有的上下边框颜色
     /deep/ .picker-box::after {
       border-bottom: 0 solid rgba(26, 176, 104, 0.1);
     }
     /deep/ .picker-box::before {
       border-top: 0 solid rgba(26, 176, 104, 0.1);
     }
   
     &-button {
       width: 590rpx;
       height: 88rpx;
       opacity: 1;
       border-radius: 100rpx;
       background: rgba(26, 176, 104, 1);
       font-size: 32rpx;
       font-weight: 400;
       line-height: 88rpx;
       color: rgba(255, 255, 255, 1);
       text-align: center;
       margin: 40rpx auto;
     }
   }
   
   
   </style>
   
   
   

   效果

觉得不错的话麻烦点点赞，关注一下