小程序 手写picker
时间: 2023-07-09 12:36:24 浏览: 49
可以通过以下步骤实现小程序手写picker:
1. 首先,在 wxml 文件中添加 picker 组件,并绑定一个数组作为数据源。
```
<picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
<view class="picker">
{{array[index]}}
</view>
</picker>
```
2. 在 js 文件中定义数组和 index 变量,并编写 bindPickerChange 方法实现选择器值改变时的回调函数。
```
Page({
data: {
array: ['苹果', '香蕉', '橘子', '梨子'],
index: 0
},
bindPickerChange: function(e) {
this.setData({
index: e.detail.value
})
}
})
```
3. 在 css 文件中定义选择器样式。
```
.picker {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
font-size: 16px;
color: #333;
background-color: #f2f2f2;
}
```
这样,就可以实现一个简单的手写 picker 组件了。当用户选择不同的选项时,会触发 bindPickerChange 回调函数,可以在该函数中处理选项改变后的逻辑。