微信小程序开发前端实现下拉框选择的小弹出层示例代码

<view class="search-container search-container-one">
  <view class="search-box searh-original">
    <!-- 下拉选择器部分 -->
    <view class="flex-center type" bindtap="togglePopup">
      <view class="search-type">{{selectedOption || '商品库'}}</view>
      <image src="/assets/arrow-down.png" mode="widthFix" class="{{showPopup ? 'arrow-up' : 'arrow-down'}}"/>
    </view>
    
    <!-- 搜索输入框部分 -->
    <view class="s-input">
      <input class="search-input" value="{{content}}" placeholder="按商品名搜索" bindinput="searchChange" placeholder-class="gray-color" bindconfirm="searchChange"/>
      <image src="/assets/search.png" class="search-image" bindtap="searchChange" mode="aspectFit"/>
    </view>
    
    <!-- 弹出层 -->
    <view class="popup-mask" wx:if="{{showPopup}}" bindtap="hidePopup"></view>
    <view class="popup-container" wx:if="{{showPopup}}">
      <view class="popup-item" bindtap="selectOption" data-value="商品库">商品库</view>
      <view class="popup-item" bindtap="selectOption" data-value="自定义库">自定义库</view>
    </view>
  </view>
</view>

/* 原有样式保持不变，新增以下样式 */
.flex-center.type {
  position: relative;
  padding-right: 10rpx;
}

.arrow-down {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
  transition: transform 0.3s;
}

.arrow-up {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 99;
}

.popup-container {
  position: absolute;
  top: 80rpx;
  left: 20rpx;
  width: 200rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
}

.popup-item {
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.popup-item:last-child {
  border-bottom: none;
}

Page({
  data: {
    showPopup: false,
    selectedOption: '', // 当前选中的选项
    content: '' // 搜索内容
  },
  
  // 切换弹出层显示状态
  togglePopup() {
    this.setData({
      showPopup: !this.data.showPopup
    });
  },
  
  // 隐藏弹出层
  hidePopup() {
    this.setData({
      showPopup: false
    });
  },
  
  // 选择选项
  selectOption(e) {
    const value = e.currentTarget.dataset.value;
    this.setData({
      selectedOption: value,
      showPopup: false
    });
    // 这里可以添加选择后的逻辑
  },
  
  // 搜索相关方法保持不变
  searchChange(e) {
    this.setData({
      content: e.detail.value
    });
    // 你的搜索逻辑
  }
});