微信小程序模擬select下拉菜單

在微信小程序開發(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)擊項(xiàng)沒有反應(yīng)，還記得我們剛才綁定到下拉項(xiàng)的值和事件嗎?我們需要通過事件獲取到值動態(tài)添加到data的tihuoWay中，添加完成后記得關(guān)閉下拉菜單。

重點(diǎn)摘要：

1. 在下拉項(xiàng)中用data-name中傳值

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

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

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

網(wǎng)頁名稱：微信小程序模擬select下拉菜單
文章URL：http://muchs.cn/news11/325211.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站收錄、微信小程序、關(guān)鍵詞優(yōu)化、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)