picker-view中的view的高度修改

巫马瀚漠
2023-12-01

picker-view组件的官方文档说:
picker-view-column
仅可放置于picker-view中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
indicator-style用来设置picker-view的选中框的样式

wxml代码:

<picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" indicator-style="height:50px;" style="width: 100%; height: 300rpx;" value="{{value}}" bindchange="bindChange">
     <picker-view-column>
         <view wx:for="{{years}}" style="line-height:50px;" wx:key="{{index}}">{{item}}年</view>
     </picker-view-column>
     <picker-view-column>
         <view wx:for="{{months}}" style="line-height:50px;" wx:key="{{index}}">{{item}}月</view>
     </picker-view-column>
     <picker-view-column>
         <view wx:for="{{days}}" style="line-height:50px;" wx:key="{{index}}">{{item}}日</view>
     </picker-view-column>
 </picker-view>

也就是说当picker-view的属性indicator-style=”height:50px;”设置以后

<picker-view-column>
    <view wx:for="{{months}}" style="line-height:50px;" wx:key="{{index}}">{{item}}月</view>
</picker-view-column>

这里picker-view-column中的子元素view的高度也已经规定了为height:50px;如果在style中或者wxss中修改都是无效的。
⚠️注意:view的默认高度是34px;
⚠️注意:只支持indicator-style=”height:50px;”设置时用px单位

indicator-style="height:50rpx;"

rpx设置无效,view的高度会是默认的34px; 且不能修改

 类似资料: