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

实现的效果图：

合并状态：

首先下面是目录结构：

下面是实现的具体代码：

.wxml

<!--选择框--><view class="product-list"> <!--条件选择--> <view class="choice-bar"> <view bindtap="opens" data-item="1" class="chioce-item" hover-class="click-once-opaque">{{start}} <image class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image> </view> <view class="sorting-list{{!isstart?' chioce-list-hide':' chioce-list-show'}}"> <view wx:for="{{slist}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-once" wx:key="userInfoListId" >{{item.name}}</view> </view> </view></view>

.wxss

.product-list { width: 100%; box-sizing: border-box; } .choice-bar { position: fixed; display: flex; width: 100%; font-size: 14px; background-color: #fff; /**z-index: 0;**/}.chioce-item { background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; width: 100%; height: 80rpx; border-top: 1rpx solid #ddd; border-bottom: 1rpx solid #ddd; border-left: 1rpx solid #ddd; } .icon-chioce { height: 30rpx; width: 30rpx;}.district-list,.sorting-list,.filter-list { margin-top: 2rpx; position: absolute; top: 80rpx; left: 0; width: 100%; background-color: #fff; z-index: -1; font-size: 14px; border-bottom: 1rpx solid #ddd;}.chioce-list-hide { display: none !important;}.chioce-list-show { /**top: 80rpx;**/ animation: slide 500ms;} .sorting-item { height: 80rpx; line-height: 80rpx; padding: 0 40rpx; border-bottom: 1rpx solid #ddd;}

.js

Page({ data: { start: "起始地", slist: [ { id: 1, name: "第一类" }, { id: 1, name: "第二类" }, { id: 1, name: "第三类" }, { id: 1, name: "第四类" }, { id: 1, name: "第五类" }, ], isstart: false, openimg: "/images/list/list.png", offimg: "/images/list/list1.png" }, opens: function (e) { switch (e.currentTarget.dataset.item) { case "1": if (this.data.isstart) { this.setData({ isstart: false, }); } else { this.setData({ isstart: true, }); } break; } }, onclicks1: function (e) { var index = e.currentTarget.dataset.index; let name = this.data.slist[index].name; this.setData({ isstart: false, isfinish: false, isdates: false, start: this.data.slist[index].name, finish: "目的地" }) }})

以上所述是小编给大家介绍的微信小程序单列下拉菜单详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！