微信小程序学习笔记（五）----实现单列下拉菜单

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

实现的效果图：

合并状态：

下拉状态：

首先下面是目录结构：

下面是实现的具体代码：

.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;
  /*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: "目的地"
    })
  }
})

往期的基础学习课程，可以查看我的csdn个人博客小程序学习笔记目录下的内容。