點選對應上面的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

})

},