在微信小程序開發(fā)工作中遇到了這樣的一個需求，在發(fā)貨的時候選擇快遞公司，這個需求聽上去很簡單不就是一個select下拉菜單嗎?有什么難的，可是我翻遍了微信小程序開發(fā)文檔都沒有找到關(guān)于select下拉菜單的api，所以我們直能通過微信小程序的特性模擬一個出來，接下來就由石家莊網(wǎng)站建設(shè)工程師為大家詳細(xì)介紹。

　　為了大家更容易的理解，在接下來的代碼圖片中就不用xw：for循環(huán)了，在大家的生產(chǎn)環(huán)境中記得要用循環(huán)。

　　首先是wxml，標(biāo)簽綁定data-name=“快遞公司1”，方便以后再js中知道點(diǎn)擊的值是多少，在綁定利用bindtap綁定mySelect事件。

　　接下來是wxss部分這部分沒有什么好說的，主要是根據(jù)效果圖生產(chǎn)出相應(yīng)的模樣，重要的一點(diǎn)就是一定要用css3的@keyframes動畫屬性，這樣可以用讓模擬的下拉菜單更加真實(shí)。

　　接下來就是主要的js功能的實(shí)現(xiàn)了

　　第一步：我們需要在data中規(guī)定兩值一個是下拉菜單是否顯示，另一個就是選中以后在文本框里的值。

　　第二步：我們要讓下拉菜單展示出來，我們就需要在其沒有出現(xiàn)下拉菜單的元素添加事件，點(diǎn)擊改變data中select的值

　　第三步：做到現(xiàn)在我們的下拉菜單已經(jīng)出來了，就是點(diǎn)擊項沒有反應(yīng)，還記得我們剛才綁定到下拉項的值和事件嗎?我們需要通過事件獲取到值動態(tài)添加到data的tihuoWay中，添加完成后記得關(guān)閉下拉菜單。

　　重點(diǎn)摘要：

　　1. 在下拉項中用data-name中傳值

　　2. 在data中要規(guī)定兩個值，分別為控制下拉菜單隱藏顯示和菜單里面的值

　　3. 此代碼只做演示沒有優(yōu)化不能直接拿到生產(chǎn)過程中，需要懂其原理在進(jìn)行優(yōu)化

　　以上關(guān)于微信小程序模擬select下拉菜單均屬石家莊網(wǎng)站建設(shè)工程師的個人觀點(diǎn)，大家如果對此有著不同的見解，可以關(guān)注公眾號“尚武科技派”給我留言，大家可以交流一下自己的心德體會，共同學(xué)習(xí)進(jìn)步。