快捷導(dǎo)航

微信小程序開發(fā)前端實(shí)現(xiàn)下拉框選擇的小彈出層示例代碼

更新時(shí)間：2025年11月04日 08:55:06 作者：鐵壁的答案

這篇文章主要介紹了微信小程序開發(fā)前端實(shí)現(xiàn)下拉框選擇的小彈出層的相關(guān)資料,組件包含下拉選擇器、搜索輸入框和彈出層,點(diǎn)擊下拉選擇器會(huì)顯示一個(gè)彈出層,需要的朋友可以參考下

<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 || '商品庫(kù)'}}</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="商品庫(kù)">商品庫(kù)</view>
      <view class="popup-item" bindtap="selectOption" data-value="自定義庫(kù)">自定義庫(kù)</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: '', // 當(dāng)前選中的選項(xiàng)
    content: '' // 搜索內(nèi)容
  },
  
  // 切換彈出層顯示狀態(tài)
  togglePopup() {
    this.setData({
      showPopup: !this.data.showPopup
    });
  },
  
  // 隱藏彈出層
  hidePopup() {
    this.setData({
      showPopup: false
    });
  },
  
  // 選擇選項(xiàng)
  selectOption(e) {
    const value = e.currentTarget.dataset.value;
    this.setData({
      selectedOption: value,
      showPopup: false
    });
    // 這里可以添加選擇后的邏輯
  },
  
  // 搜索相關(guān)方法保持不變
  searchChange(e) {
    this.setData({
      content: e.detail.value
    });
    // 你的搜索邏輯
  }
});

代碼解析：