小程序下拉菜单如何实现

新建一个小程序目次布局，包罗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 条评论