vant组件小程序使用Picker和弹出层

Picker组件

Picker组件是小程序中常用的选择器组件，可以用来选择一些固定的选项。可以设置Picker组件的mode属性值为selector、multiSelector、time、date、region，分别对应不同类型的选择器。

使用方法：

1）在wxml中添加Picker组件

当前选择：{{array[index]}}

2）在js文件中绑定change事件

Page({ data: { array: ['美国', '中国', '巴西', '日本'], index: 0 }, bindPickerChange: function(e) { this.setData({ index: e.detail.value }) } })

弹出层

弹出层是指在当前页面上弹出一个新的层，覆盖在页面上方的一种组件。可以用来展示一些信息、提示用户等。

使用方法：

1）在wxml中添加view组件，设置hidden属性值为true

2）在js文件中绑定事件，控制弹出层的显示和隐藏

Page({ data: { showModal: false }, showModal: function() { this.setData({ showModal: true }) }, hideModal: function() { this.setData({ showModal: false }) } })

CSS样式：

.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20rpx; border-radius: 10rpx; z-index: 1000; } .title { font-size: 32rpx; font-weight: bold; text-align: center; margin-bottom: 20rpx; } .content { font-size: 28rpx; text-align: center; margin-bottom: 20rpx; } .btn { display: block; width: 100%; height: 80rpx; font-size: 32rpx; background-color: #4c9afa; color: #fff; border-radius: 10rpx; text-align: center; line-height: 80rpx; }