技術標籤：小程式

微信小程式本身並沒有自帶的下拉框元件，我們可以通過view標籤自定義一個下拉框。(僅供參考）

目錄

• 檔案目錄
• 實現效果
• 實現邏輯
• • 設定資料
  • 設定預設選項
  • 實現彈出下拉框
  • 提供選項值
  • 設定所選值
• 原始碼
• • wxml
  • wxss
  • js

檔案目錄

檔案的功能：
xxx.js：決定使用者操作和介面的互動；
xxxw.wxml：決定介面有什麼內容；
xxx.wxss：決定內容長什麼樣子。

實現效果

實現邏輯

設定資料

在js檔案設定下拉框的資料：是否隱藏（預設隱藏），預設選項，可選值；

data:{
    //test物件資料
    test:{
      //預設為隱藏
      hidden:
 
true,
      //預設值為a
      default:"a",
      //可選值為:"a","b","c"
      txt:[
        "a","b","c"
      ]
    }
  }

設定預設選項

在wxml中設定選項的預設值：test中的default。
用{{}}引用js的資料

<view class="select" bindtap="showSelect" id="{{index}}"
 
>
{{test.default}}
</view>

實現彈出下拉框

當下拉框為隱藏時，點選預設值，使下拉框的hidden屬性為false，顯示出下拉框；
當下拉框顯示時，點選預設值，使下拉框的hidden屬性為true，顯收回下拉框；
即每次點選變更下拉框的hidden屬性，用bindtap捕捉點選動作，在js檔案編寫對應函式。

 //展示或隱藏選項
  showSelect:function(e){
  	//獲取當前資料
    var data= this.data.test;
    console.log("開啟區域下拉框")
    //變更hidden屬性
 

    data["hidden"]=!data.hidden;
    //執行變更
    this.setData({
      test:data
    })
  },

提供選項值

下拉框展示出來，所在的view應該擁有對應的選項值供選擇。
在wxml檔案中，遍歷test中的txt值。

wx:for:用於單純的陣列迴圈
wx:for-item:定義迴圈中訪問子元素的屬性名
data-index:獲取資料索引值

 <view wx:for="{{test.txt}}" wx:for-item="test_item" data-index="{{index}}"  wx:for-index="index">
 {{test_item}}
 </view>

設定所選值

當用戶點選下拉框中的選項時，將選中的值設定為當前值

//設定選項的值
  SelectVal:function(e){
     // 獲取到點選的列表下標，因為是在下拉的父元素點選，所以獲取到menus下標
     var index= e.target.dataset.index;
     var data =this.data.test;
     //獲取選中的選項的值
     var test_name = data.txt[index];
     
     console.log("選擇了選項:"+test_name);
    
     //設定區域預設值和隱藏
     data["default"]=test_name;
     data["hidden"]=!data.hidden;
     this.setData({
       test:data
     })
  },

原始碼

wxml

<!--pages/index/test.wxml-->
<view class="top">
  <view class="select" bindtap="showSelect" id="{{index}}">{{test.default}}
  </view>
<view class="top">
  <view class="option" hidden="{{test.hidden}}" bindtap="SelectVal" >
     <view wx:for="{{test.txt}}" wx:for-item="test_item" data-index="{{index}}"  wx:for-index="index">
     {{test_item}}
     </view>
   </view>
</view>
</view>

wxss

.top{
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #ffffff;
}
.select{
width:100%;
font-size:23px;
display: flex;
align-items: center;
justify-content: center;
background-color: #686767;
}
.option{
position:absolute;
top:62rpx;
width:100%;
font-size:20px;
background-color:#ffffff;
}

js

//展示或隱藏選項
  showSelect:function(e){
  	//獲取當前資料
    var data= this.data.test;
    console.log("開啟區域下拉框")
    //變更hidden屬性
    data["hidden"]=!data.hidden;
    //執行變更
    this.setData({
      test:data
    })
  },
  //設定選項的值
  SelectVal:function(e){
     // 獲取到點選的列表下標，因為是在下拉的父元素點選，所以獲取到menus下標
     var index= e.target.dataset.index;
     var data =this.data.test;
     //獲取選中的選項的值
     var test_name = data.txt[index];
     
     console.log("選擇了選項:"+test_name);
    
     //設定區域預設值和隱藏
     data["default"]=test_name;
     data["hidden"]=!data.hidden;
     this.setData({
       test:data
     })
  }