微信小程序根据下拉列表发送指令
前段时间在忙着考试和做项目,导致很久一段时间没更新,今天就浅浅更新一下,因为做项目需要下发很多命令,一开始是写了按钮事件,但是按键太多导致页面不美观简洁,后面想了一下用下拉列表来实现,这样界面就好看多了。
可以直接点这个链接过去看他的博客可以看到他做的是这样的界面
我在其基础实现这样的界面
这里我着重讲解一下按钮怎么获取下拉列表的下标数组以及相应的指令文字。界面设计我就不讲太多,以免侵权。文章末尾我会放置源码链接,大家可以看源码学习。
接下来我们看index.js里面的代码,首先,我们先记住初始数据里面的几个值,为下面调用做准备。selectData是列表数据,index是列表下标值,这里可以决定下拉列表收起时显示的一个值。
data: { show:false,//控制下拉列表的显示隐藏,false隐藏、true显示 selectData:[控制指令,开灯,关灯,打开风扇,关闭风扇,打开窗帘,关闭窗帘,打开加湿器,关闭加湿器],//下拉列表的数据 index:0,//选择的下拉列表下标 Index:0 },
接下来就是找到下标值和指令文字 ,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; }
百度网盘链接 链接: 提取码:y4pw
上一篇:
uniapp开发微信小程序-2.页面制作