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

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: 90 rpx ; line-height: 90 rpx ; border-bottom: solid 1px #eee ; position: fixed ; top: 0 ; width: 750 rpx ; z-index: 1 ; background: #f5f5f5 ;}

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

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

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

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

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

.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.运行截图：

小程序教程地址：小程序教程集合地址

如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat：lzqcode