接下来我想做的是一个下拉菜单用来分类的，但是在网上搜了一下，基本上全都是比较复杂的分类菜单，最简单的也是分三列的下拉菜单，但是并不想要这么复杂的，最后找了一个三列的，改成了单列。也把代码尽可能的简单化了。

实现的效果图：

合并状态：

首先下面是目录结构：

下面是实现的具体代码：页面结构

！-选择框- view class='product-list '！-条件选择-view class=' choice-bar ' view bind tap=' open ' data-item=' 1 ' class=' chioce-item ' hover-class=' click-once-opaque ' { start } } image class=' icon-chioce ' src=' http : { {！开始了吗？打开img : off mg } } '/image/view view class='排序-列表{{!"开始了吗？"chioce-list-hide ' : ' chioce-list-show ' } ' view wx : for=' { { slist } } ' catch tap=' onclicks 1 ' data-index=' { { index } } ' class=' sorting-item ' hover-class=' click-once ' wx 3360 key=' user finfolstid ' { item。name } }/view/view/view/view。页面样式表。产品列表{宽度： 100%；盒子尺寸：边框盒子；} .选择栏{位置：固定；显示： flex宽度： 100%;font-size : 14px背景-color : # fff；/* * z-index : 0；**/}.chioce-item {底色： # fffdisplay : flex align-items :居中；正义-内容：空格；padding: 0 20rpx宽度： 100%;高度： 80 rpx border-top : 1px实心# dddborder-bottom: 1rpx实心# ddd边框-左侧： 1rpx实心# ddd/*右边框： 1rpx实心# ddd*/}。icon-chioce { height : 30 rpx；宽度： 30 rpx}.地区名单。排序列表。筛选器列表{ margin-top : 2r px；绝对位置：top : 80 rpxleft : 0；宽度： 100%;背景-color : # fff；z指数：-1;font-size : 14px边框-底部： 1rpx实心# ddd}。chioce-list-hide { display : none！重要；}.chioce-list-show {/* * top : 80 rpx；* */动画：幻灯片500毫秒；} .分拣-物品{ height: 80rpx线高： 80 rpxpadd : 0 40 rpx border-bottom : 1rpx实心# ddd}。射流研究…

页面({数据： {开始： }起始地，slist: [ { id: 1，name: '第一类}，{ id: 1，name: '第二类}，{ id: 1，name: '第三类}，{ id: 1，name: '第四类}，{ id: 1，name: '第五类}，]，isstart: false，openimg : '/images/list/list。png '，offim : '/images/list/list 1。png ' }，opens:函数{ switch(e . currenttarget。数据集。item){ case ' 1 ' : if(this。数据。是start){这个。setdata({ is start : false，})；} else { this。setdata({ isstart : true，})；} break} }，onclicks1:函数{ var index=e . CurrentTarget。数据集。指数；let name=this.data.slist[index].姓名；这个。setdata({ is start : false，isfinish: false，isdates: false，start : this。数据。列表[索引].名称，完成时间： '目的地' }) }})以上所述是小编给大家介绍的微信小程序单列下拉菜单详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！