实现导航栏下拉菜单列表页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1433515

1.wxml页面代码：

<!--选项卡-->

<view class="tabTit box tc bg\_f">

<view class="flex1{{tab[index]?' active':''}}" wx:for="{{tabTxt}}" wx:key="" data-index="{{index}}" bindtap="filterTab">

<text>{{item}}</text>

<image wx:if="{{index === tabTxt.length-1}}" src="/images/arrow.png"></image>

</view>

</view>

<!--筛选项-->

<view class="tabLayer tc" hidden="{{!tabFlag}}">

<text class="{{tabAll==0?'active':''}}" data-id="0" data-index="4" data-txt="全选" bindtap="filter">不限</text>

<text class="{{tabAll==item.id?'active':''}}" wx:for="{{tabList}}" wx:key="" data-id="{{item.id}}" data-index="4" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>

</view>

2.app.wxss中添加如下样式：

/* tab下拉样式 */

.bg_f{background: #fff}

.flex1 {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

box-flex: 1;

flex: 1;

overflow: hidden;

display: block;

}

.box {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

3.wxss页面代码：

/* tab下拉样式 */

.tabTit{height:90rpx;line-height: 90rpx;border-bottom: solid 1px #eee;position:fixed;top:0;width: 750rpx;z-index: 1;background: #f5f5f5;}

.tabTit .active{color:#e64340;background: #fff;}

.tabTit .active image{transform: rotate(180deg);background: none;}

.tabTit image{width:26rpx;height:26rpx;vertical-align: middle;margin-left: 5px;}

.tabLayer{box-shadow: 0 5px 5px rgba(0,0,0,.15);width:750rpx;overflow: hidden;position: fixed;top:90rpx;z-index: 1;background: #fff;padding-bottom: 26rpx;border-bottom: solid 1px #eee;}

.tabLayer text{width:210rpx;height:60rpx;line-height:60rpx;float:left;border: solid 1px #eee;margin:20rpx 0 0 26rpx;}

.tabLayer .active{color:#e64340;border-color:#e64340;}

4.js页面代码：

data数据定义部分：

tabAll: 0,//是否选中

tabFlag: false,

tabTxt: ['首页', '男装', '鞋包', '手机', '全部'],//tab文案

tab: [true, false, false, false, false],

tabList: [{ name: '电器', id: '5' }, { name: '食品', id: '6' },

{ name: '百货', id: '7' }, { name: '服饰', id: '8' },

{ name: '汽车', id: '9' }, { name: '家装', id: '10' },

{ name: '运动', id: '11' }, { name: '母婴', id: '12' },

{ name: '水果', id: '13' }, { name: '内衣', id: '14' },

{ name: '家纺', id: '15' }, { name: '美妆', id: '16' }]

函数部分：

// 选项卡

filterTab: function (e) {

var data = false, false, false, false, false, index = e.currentTarget.dataset.index;

data[index] = !this.data.tab[index];

if (index == 4) {

this.setData({

    tabFlag: true

  })

}else{

 this.setData({

    tabFlag: false

  })

}

this.setData({

  tab: data,

})

},

//筛选项点击操作

filter: function (e) {

var self = this, id = e.currentTarget.dataset.id, txt = e.currentTarget.dataset.txt, tabTxt = this.data.tabTxt, index = e.currentTarget.dataset.index;

tabTxt[index] = txt;

self.setData({

  tabTxt: tabTxt,

  tabAll: id,

  tab: [false, false, false, false, true],

  tabFlag: false

});

},

5.运行截图：

​

​