写一个微信小程序的下拉选择
时间: 2024-04-13 11:17:14 浏览: 15
<view class="container">
<picker mode="selector" range="{{options}}" bindchange="onPickerChange">
<view class="picker">
{{selectedOption}}
<image class="arrow" src="/images/arrow.png"></image>
</view>
</picker>
</view>
Page({
data: {
options: ['选项一', '选项二', '选项三', '选项四'],
selectedOption: '请选择选项'
},
onPickerChange: function(event) {
const selectedOption = this.data.options[event.detail.value];
this.setData({
selectedOption: selectedOption
});
}
})
/* CSS */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.picker {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
width: 200px;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
color: #333;
}
.arrow {
width: 10px;
height: 10px;
transform: translateY(2px);
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)