微信小程序做下拉菜单

这种简单的下拉菜单点击对应大标题弹出子菜单，点击子菜单，子菜单消失。

首先把静态的写出来：

<view class="item_nav_set">
  <view catchtap='item_nav_set_list_display' data-index='0' class="item_nav_set_list {{item_nav_set_list_light[0]}}">
      <view>排序类型</view>
  </view>
  <view catchtap='item_nav_set_list_display' data-index='1' class="item_nav_set_list {{item_nav_set_list_light[1]}}" >
      <view>排序方式</view>
  </view>
</view>
<view class="item_nav_set_list_content {{sort_status[0]}}" >
  <view data-index='0_0' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][0]}}'>时间</view>
  <view data-index='0_1' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][1]}}'>热度</view>
  <view data-index='0_2' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][2]}}'>喜欢</view>
  <view data-index='0_3' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[0][3]}}'>评论</view>
</view>
<view class="item_nav_set_list_content {{sort_status[1]}}">
  <view data-index='1_0' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[1][0]}}'>正序</view>
  <view data-index='1_1' catchtap='item_nav_set_list_content_display' class='{{item_nav_set_list_content_light[1][1]}}'>倒序</view>
</view>

---

wxss:

//主要的就是都设定位，设好z-index层级关系。
.item_nav_set{
  height: 45px;
  width: 100%;
  flex-direction:row;
  background-color: #B0BEC5;
  position: absolute;
  top: 40px;
  z-index: 999;
}
.item_nav_set_list{
  display: inline-block;
  width: 50%;
  text-align: center;
  line-height: 45px;
  color: #ffffff;
}
//这个是主菜单子菜单的高亮。
.item_nav_set_list_light{
  color: #00E5FF ! important;
}
.item_nav_set_list_content_light{
  color: #00E5FF ! important;
  background-color: #CFD8DC! important;
}
//一开始让子菜单消失。用的transform。
.item_nav_set_list_content{
  padding-top: 85px;
  width: 100%;
  z-index: 1;
  position: absolute;
  transition: transform .8s;
  transform:  translateY(-100%);
}
.item_nav_set_list_content>view{
  height: 40px;
  line-height: 40px;
  color: #c0c0c0;
  text-align: center;
  background-color: #ECEFF1;
  border-bottom: 1px solid #fff;
}
/* 标题栏下拉菜单 */
//这里是显示和隐藏。
.sort_show{
  transform: translateY(0);
  -webkit-transform: translateY(0);
}
.sort_hide{
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

先别管这个js，只看结构和样式。不用解释我觉得。

---

写完静态的就开始写js：

//item.js
//获取应用实例
const app = getApp()
//下面这三个函数，就是初始化状态的。
function sort_display (){
  return ['sort_hide','sort_hide'];
}
function item_nav_set_list_light() {
  return ['',''];
}
function item_nav_set_list_content_light() {
  return [
    ['', '', '', ''],
    ['', '']
  ];
}
Page({
  data: {
  //这里是存储数据的地方，把改变过的东西放在这里。
  //主菜单高亮
    item_nav_set_list_light: item_nav_set_list_light(),
    //储存子菜单显示与否
    sort_status: sort_display(),
//    子菜单高亮
    item_nav_set_list_content_light: item_nav_set_list_content_light(),
  },
  //事件处理函数

  // 点击排序设置
  //这个是点击主菜单触发的函数
  item_nav_set_list_display:function (e){
//  首先获取一下，点击的信息，下面这行就是得出点击的哪个主菜单
    var index = parseInt(e.currentTarget.dataset.index);  
//   将初始化的状态获取到。   
//因为思路是点击一个主菜单，然后将所有子菜单隐藏，然后在对点击的主菜单
//下的子菜单进行显示处理 。所以获取初始化状态就是隐藏所有子菜单的动作。
//因为最后是将这个值赋值给data中的数据
//页面根据data这种的数据做出改变。
    var new_sort_display = sort_display();
    var new_item_nav_set_list_light = item_nav_set_list_light();
    //if判断状态，然后做出响应动作
    if (this.data.sort_status[index] == 'sort_hide') {
      new_sort_display[index] = 'sort_show';
      new_item_nav_set_list_light[index] = 'item_nav_set_list_light';
    } else {
      new_sort_display[index] = 'sort_hide';
      new_item_nav_set_list_light[index] = '';
    }     
    //最后将值赋给data
    this.setData({
      sort_status: new_sort_display,
      item_nav_set_list_light: new_item_nav_set_list_light
    });
  },
//下面这个同理，就不罗嗦了。
// 点击排序设置内容
  item_nav_set_list_content_display:function (e){
    var new_sort_display = sort_display();
    var new_item_nav_set_list_content_light = item_nav_set_list_content_light();
    var indexArray = e.currentTarget.dataset.index.split('_'); 
    if (indexArray[0] == 0){
      new_item_nav_set_list_content_light[0][indexArray[1]] = 'item_nav_set_list_content_light';
      new_item_nav_set_list_content_light[1] = this.data.item_nav_set_list_content_light[1];
    } else if (indexArray[0] == 1){
      new_item_nav_set_list_content_light[1][indexArray[1]] = 'item_nav_set_list_content_light';
      new_item_nav_set_list_content_light[0] = this.data.item_nav_set_list_content_light[0];
    }
    this.setData({
      sort_status: new_sort_display,
      item_nav_set_list_content_light: new_item_nav_set_list_content_light
    });
    console.log(new_item_nav_set_list_content_light);
  }
})

我把东西都写在注释里了