微信小程序实现下拉菜单
点击对应上面的tab选中
/*nav导航部分*/
page{ background: #eeeeee;}
.nav-wrapper{ position: relative;}
.nav-container{ display: flex; flex-direction: row; border-bottom: 1rpx solid #dbd1d1;}
.scroll_box{
width: 86.66667%;
height: 76rpx;
overflow: hidden;
padding: 20rpx 16rpx 0 16rpx ;
background: #eeeeee;
white-space: nowrap;
font-size:28rpx;
}
.item_list{
/*width: 120rpx;*/
padding: 0 16rpx 10rpx 16rpx;
box-sizing: border-box;
margin-right: 23rpx;
display: inline-block;
color: #323232;
position: relative;
text-align: center;
}
.active{ border-bottom: 3rpx solid #e42747;color: #e42747;}
.pull-nav-wrapper{ position: absolute; top: 86rpx; }
.pull-down{
width:13.3333%;
display: flex;
background: #fff;
}
.pull-down{
width:13.3333%;
display: flex;
}
.pull-down-inner{
margin-top: 20rpx;
margin-left: 40rpx;
display: inline-block;
height: 26rpx;
width: 26rpx;
content: '';
border-top:2px solid #323232;
border-right: 2px solid #323232;
transform: rotate(135deg);
}
.pull-inner{
margin-top: 36rpx;
transform: rotate(-45deg); }
.hide{ display: none;} .show{ display: block;}
.pull-nav-container{ width: 100%;}
.pull-nav{
width: 33.3%;
text-align: center;
float: left;
line-height:60rpx;}
.pull-nav-container{
position: absolute;
z-index: 100;
background-color: #eeeeee;}
data: {
lists: ["葡萄酒", "白酒", "黄酒", "啤酒", "米酒", "老白酒", "饮料", "白酒", "米酒", "葡萄酒"],
curIndex:0,
pullStatus:true,//下拉按钮改变状态
scrollLeft:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 导航点击改变状态
changeCate:function(e){
var curCateIndex=e.currentTarget.dataset.index;
this.setData({
curIndex: curCateIndex,
pullStatus: true
})
},
//箭头点击下方导航显示状态
pullDown:function(){
this.setData({
pullStatus:!this.data.pullStatus
})
},
//下拉导航点击对应的部分
pullCate:function(e){
var that=this;
var curIndex = e.currentTarget.dataset.index;
var scrollLeft1=0;
scrollLeft1 = scrollLeft1 + 50*curIndex;
that.setData({
curIndex: e.currentTarget.dataset.index,
pullStatus:true,
scrollLeft: scrollLeft1
})
},