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

2019-05-25 21:18:08 浏览数 (1)

版权声明：本文为博主原创文章，未经博主允许不得转载。 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.运行截图：

​

​

数据库一体机TData html

0 人点赞