点击对应上面的tab选中
<view class='nav-wrapper'>
<view class='nav-container'>
<view class="scroll_box">
<scroll-view class="scroll-view_x" scroll-x scroll-left="{{scrollLeft}}" style="width: auto;overflow:hidden;" scroll-into-view="{{toView}}">
<view class="item_list {{index==curIndex?'active' :' '}}" wx:for="{{lists}}" wx:key="index" bindtap='changeCate' data-index="{{index}}">
<view>{{item}}</view>
</view>
</scroll-view>
</view>
<view class="pull-down " bindtap='pullDown'>
<view class="pull-down-inner {{pullStatus?'' :'pull-inner'}}"></view>
</view>
</view>
<view class="pull-nav-container">
<block wx:for="{{lists}}" wx:key="index">
<view class="pull-nav {{pullStatus?'hide' :' show'}}" bindtap='pullCate' data-index="{{index}}">
<view class='pull-item'>{{item}}</view>
</view>
</block>
</view>
</view>
/*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
})
},