请写一个微信小程序Picker 和 Popup搭配使用的实例

好的，下面是一个简单的微信小程序Picker和Popup搭配使用的实例：

1. 在wxml文件中添加Popup和Picker组件，并绑定显示/隐藏状态：

<!-- Popup组件 -->
<view class="popup" hidden="{{!showPopup}}">
  <view class="mask" bindtap="hidePopup"></view>
  <view class="content">
    <!-- Picker组件 -->
    <picker mode="selector" range="{{selector}}" bindchange="bindPickerChange">
      <view class="picker">
        {{selector[selected]}}
      </view>
    </picker>
    <button class="confirm" bindtap="hidePopup">确定</button>
  </view>
</view>

2. 在js文件中定义数据和事件处理函数：

Page({
  data: {
    showPopup: false, // 控制Popup的显示/隐藏状态
    selector: ['苹果', '香蕉', '橙子'], // Picker的选择列表
    selected: 0 // Picker的默认选择项
  },

  // 显示Popup
  showPopup: function () {
    this.setData({
      showPopup: true
    });
  },

  // 隐藏Popup
  hidePopup: function () {
    this.setData({
      showPopup: false
    });
  },

  // Picker的选择事件
  bindPickerChange: function (e) {
    this.setData({
      selected: e.detail.value
    });
  }
})

3. 在wxss文件中定义样式：

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}

.picker {
  padding: 15rpx;
  text-align: center;
  font-size: 16rpx;
  color: #333;
}

.confirm {
  display: block;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 16rpx;
  color: #fff;
  background-color: #007aff;
}

通过上述代码，我们就可以实现在微信小程序中使用Picker和Popup组件的效果了。当用户点击按钮时，弹出Popup组件，选择完毕后通过点击确定按钮关闭Popup组件，并将选择结果更新到页面上。