题主解决了问题但是并没有把方案共享出来。我也是一个渴求解决方案的人，最终终于尝试出来了，技术问题有时候就像窗户纸，一捅就透，因此我决定借用这个问题把方案写出来，避免以后遇到问题的人再浪费时间。 题主要修改成的绿色上下边框效果可以通过设置indicator-class实现，不过这个边框不是indicator的，而是伪类::before和::after上的。 wxml： <picker-view indicator-class="picker-view__indicator" class="picker-view">   <picker-view-column>     <view wx:for="{{[1,2,3,4,5,6]}}" wx:key="{{index}}" class="picker-view__item">{{item}}</view>   </picker-view-column>   <picker-view-column>     <view wx:for="{{[1,2,3,4,5,6]}}" wx:key="{{index}}"  class="picker-view__item">{{item}}</view>   </picker-view-column> </picker-view> wxss： .picker-view {   width: 80px;   height: 100px; } .picker-view__indicator {   height: 40px; } .picker-view__indicator::before {   border-color: red; } .picker-view__indicator::after {   border-color: blue; } .picker-view__item {   line-height: 40px;   text-align: center; } 效果： [图片] 另一个问题，题主截图中的小时和分钟间的冒号的实现方案，这个实现起来就比较简单了，只需要换一个思路就行：不要将整体看作一个picker-view，那其实是两个picker-view中间加了一个冒号。

你想要获得的底部区域值已经被定义好了，就是env(safe-area-inset-bottom)，假如你的自定义tabbar添加了名为custom-tabbar的class，可以为其设置padding-bottom，代码如下： .custom-tabbar {   padding-bottom: env(safe-area-inset-bottom); }