接下来我想做的是一个下拉菜单用来分类的，但是在网上搜了一下，基本上全都是比较复杂的分类菜单，最简单的也是分三列的下拉菜单，但是并不想要这么复杂的，最后找了一个三列的，改成了单列。也把代码尽可能的简单化了。
实现的效果图：
合并状态：
首先下面是目录结构：
下面是实现的具体代码：
.wxml
<!--选择框--> <view> <!--条件选择--> <view> <view bindtap="opens" data-item="1" hover-class="click-once-opaque">{{start}} <image src="{{!isstart?openimg: offimg}}"></image> </view> <view> <view wx:for="{{slist}}" catchtap="onclicks1" data-index="{{index}}" 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; /*border-right: 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: "目的地" }) } })
以上所述是小编给大家介绍的微信小程序单列下拉菜单详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: