微信小程序根据下拉列表发送指令

​ 前段时间在忙着考试和做项目，导致很久一段时间没更新，今天就浅浅更新一下,因为做项目需要下发很多命令，一开始是写了按钮事件，但是按键太多导致页面不美观简洁，后面想了一下用下拉列表来实现，这样界面就好看多了。

​ 然后发现微信小程序下拉列表只能自己自定义，微信开发者工具没有提供这个组件。网上查看了一下资料，我下面的代码是在另外一个博主的基础上扩展的。

可以直接点这个链接过去看他的博客https://blog.csdn.net/wolf6699/article/details/107915020?可以看到他做的是这样的界面

我在其基础实现这样的界面

​ 这里我着重讲解一下按钮怎么获取下拉列表的下标数组以及相应的指令文字。界面设计我就不讲太多，以免侵权。文章末尾我会放置源码链接，大家可以看源码学习。

​ 接下来我们看index.js里面的代码，首先，我们先记住初始数据里面的几个值，为下面调用做准备。selectData是列表数据，index是列表下标值，这里可以决定下拉列表收起时显示的一个值。

 data: {
    show:false,//控制下拉列表的显示隐藏，false隐藏、true显示
    selectData:['控制指令','开灯','关灯','打开风扇','关闭风扇','打开窗帘','关闭窗帘','打开加湿器','关闭加湿器'],//下拉列表的数据
    index:0,//选择的下拉列表下标
    Index:0
  },

接下来是按钮的事件函数。我在index.js定义的send函数就是它的事件函数。首先我们要怎么获取到下拉列表的下标呢？直接var index =index;是不行的，这里我们可以调用微信小程序提供的一个函数getCurrentPages()，可以看到这样我们可以获取当前页面的数据

接下来就是找到下标值和指令文字 ，select是下标值 postdata 是指令文字

  var select =sele[sele.length-1].data.index;
  var postdata=sele[sele.length-1].data.selectData[select];

下来列表那么多指令，一个一个写肯定很繁琐，这里用switch来判断，就很方便

 switch(select){
       case 1:console.log(postdata);break;   //打开灯
       case 2:console.log(postdata);break;// 关闭灯
       case 3:console.log(postdata);break;  //打开风扇
       case 4:console.log(postdata);break;//关闭风扇
       case 5:console.log(postdata);break;//打开窗帘
       case 6:console.log(postdata);break;//关闭窗帘
       case 7:console.log(postdata);break; //打开加湿器
       case 8:console.log(postdata);break; //关闭加湿器
       default: ;break;
     
    }     

打开微信开发者工具的调试器就可以看到我们发送的相关指令，要应用于实际应用只需要把console.log(postdata);改成你想要发送的函数就可以了

百度网盘链接
链接：https://pan.baidu.com/s/1_kqo9NbKZSmvpsCaUz2Upw
提取码：y4pw