微信小程序picker样式
时间: 2023-06-12 10:05:41 浏览: 55
微信小程序的picker组件有两种样式:普通样式和底部弹出样式。
普通样式:
1. 在wxml文件中添加picker组件:
```
<view class="picker-container">
<picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
```
2. 在对应的wxss文件中添加样式:
```
.picker-container {
display: flex;
justify-content: center;
align-items: center;
height: 300rpx;
}
.picker {
font-size: 28rpx;
color: #333;
text-align: center;
line-height: 80rpx;
border: 1rpx solid #ccc;
border-radius: 4rpx;
width: 500rpx;
}
```
底部弹出样式:
1. 在wxml文件中添加picker组件:
```
<view class="picker-container">
<view class="picker-btn" bindtap="showPicker">请选择</view>
<view class="picker-mask" wx:if="{{isShowPicker}}" bindtap="hidePicker"></view>
<view class="picker-wrapper" wx:if="{{isShowPicker}}">
<picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
</view>
```
2. 在对应的wxss文件中添加样式:
```
.picker-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.picker-btn {
font-size: 28rpx;
color: #333;
text-align: center;
line-height: 80rpx;
border: 1rpx solid #ccc;
border-radius: 4rpx;
width: 500rpx;
}
.picker-mask {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.picker-wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 100;
}
.picker {
font-size: 28rpx;
color: #333;
text-align: center;
line-height: 80rpx;
border-bottom: 1rpx solid #ccc;
width: 100%;
}
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)