前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实现导航栏下拉菜单列表页面

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

作者头像
林老师带你学编程
发布2019-05-25 21:18:08
4.4K0
发布2019-05-25 21:18:08
举报
文章被收录于专栏:强仔仔

版权声明:本文为博主原创文章,未经博主允许不得转载。 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数据定义部分:

代码语言:txt
复制
tabAll: 0,//是否选中
代码语言:txt
复制
tabFlag: false,
代码语言:txt
复制
tabTxt: ['首页', '男装', '鞋包', '手机', '全部'],//tab文案
代码语言:txt
复制
tab: [true, false, false, false, false],
代码语言:txt
复制
tabList: [{ name: '电器', id: '5' }, { name: '食品', id: '6' },
代码语言:txt
复制
{ name: '百货', id: '7' }, { name: '服饰', id: '8' },
代码语言:txt
复制
{ name: '汽车', id: '9' }, { name: '家装', id: '10' },
代码语言:txt
复制
{ name: '运动', id: '11' }, { name: '母婴', id: '12' },
代码语言:txt
复制
{ name: '水果', id: '13' }, { name: '内衣', id: '14' },
代码语言:txt
复制
{ name: '家纺', id: '15' }, { name: '美妆', id: '16' }]

函数部分:

// 选项卡

filterTab: function (e) {

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

代码语言:txt
复制
data[index] = !this.data.tab[index];

if (index == 4) {

this.setData({

代码语言:txt
复制
    tabFlag: true
代码语言:txt
复制
  })
代码语言:txt
复制
}else{
代码语言:txt
复制
 this.setData({
代码语言:txt
复制
    tabFlag: false
代码语言:txt
复制
  })
代码语言:txt
复制
}

this.setData({

代码语言:txt
复制
  tab: data,
代码语言:txt
复制
})

},

//筛选项点击操作

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;

代码语言:txt
复制
tabTxt[index] = txt;
代码语言:txt
复制
self.setData({
代码语言:txt
复制
  tabTxt: tabTxt,
代码语言:txt
复制
  tabAll: id,
代码语言:txt
复制
  tab: [false, false, false, false, true],
代码语言:txt
复制
  tabFlag: false
代码语言:txt
复制
});

},

5.运行截图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年04月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库一体机 TData
数据库一体机 TData 是融合了高性能计算、热插拔闪存、Infiniband 网络、RDMA 远程直接存取数据的数据库解决方案,为用户提供高可用、易扩展、高性能的数据库服务,适用于 OLAP、 OLTP 以及混合负载等各种应用场景下的极限性能需求,支持 Oracle、SQL Server、MySQL 和 PostgreSQL 等各种主流数据库。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档