小程序下拉菜單如何實現

新建一個小程序目次布局，包羅index.js文件，index.wxml文件，index.wxss文件。

在index.wxml頁面，利用view建立下拉選擇模塊，并設置響應的class屬性名稱，用于下面利用css樣式結構美化。

在index.wxss文件內，利用css對view進行樣式結構，給“請選擇”下拉框一個邊框，代碼如下：

在index.wxml頁面，利用view建立下拉選擇的菜單，這里建立三個菜單，需要注重的是要加上data-name屬性，用于下面實現選擇菜單后顯示在選擇框里。

在index.wxss文件內，利用css對下拉選項進行樣式結構，代碼如下：

別離經由過程bindtap給“請選擇”的view綁心猿意馬bindShowMsg方式，給菜單的view綁心猿意馬mySelect方式，用于在js中實現節制。

在index.js頁面，編寫兩個方式，一個是bindShowMsg ()方式，另一個是mySelect方式，用于實現被選擇了下拉的菜單后顯示菜單內容。代碼如下：

編譯小程序，預覽小程序運行后的結果。

0 條評論