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

刺骨的言语ヽ痛彻心扉 2022-05-27 00:53 299阅读 0赞

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

![299_method_get-resource_shareToken_21E6CFCDCB3743619DF6085BE9389DC5_entryId_192425477][]

**小程序教程地址：[小程序教程集合地址][Link 1]**

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

![300_method_get-resource_shareToken_21E6CFCDCB3743619DF6085BE9389DC5_entryId_192425477][]

[299_method_get-resource_shareToken_21E6CFCDCB3743619DF6085BE9389DC5_entryId_192425477]: https://note.youdao.com/yws/api/group/67516516/noteresource/67E8F928056F4E9C8A2CB934566898BC/version/299?method=get-resource&shareToken=21E6CFCDCB3743619DF6085BE9389DC5&entryId=192425477
[Link 1]: https://blog.csdn.net/linzhiqiang0316/article/details/79858852
[300_method_get-resource_shareToken_21E6CFCDCB3743619DF6085BE9389DC5_entryId_192425477]: https://note.youdao.com/yws/api/group/67516516/noteresource/C82F56188E3A4C94BF6E6A858604FA7A/version/300?method=get-resource&shareToken=21E6CFCDCB3743619DF6085BE9389DC5&entryId=192425477