第微信小程序下面商品左右滑動上面tab也跟隨變動功能實(shí)現(xiàn)小程序下面商品左右滑動上面tab也跟隨變動功能

點(diǎn)擊tab切換下面的上面信息，商品左右滑動切換上面的tab分類

功能描述：點(diǎn)擊tab切換下面的商品信息；滑動下面的商品信息tab也進(jìn)行切換。

第一步：我們先來說一下上面的tab,tab我們使用scroll-viewscroll-x=true就可以。

scroll-viewscroll-x="true"scroll-with-animation="true"

blockwx:for="{{cates}}"wx:key="index"

viewclass="{{item.id===currentId'cate-item-actcate-item':'cate-item'}}"data-id="{{item.id}}"bindtap="cateChange"{{}}/view

/block

/scroll-view

/*分類*/

.cates{

position:fixed;

z-index:100;

top:0;

white-space:nowrap;

width:100%;

padding:20rpx30rpx;

box-sizing:border-box;

font-family:HiraginoSansGB;

background-color:#fff;

border-top:1rpxsolid#eee;

.cates.cate-item{

display:inline-block;

padding:10rpx20rpx;

font-size:26rpx;

margin-right:20rpx;

color:#767A84;

.cates.cate-item:last-child{

margin-right:0rpx;

.cates.cate-item-act{

background:#3293FF;

color:#fff;

border-radius:48rpx;

}

第二步：接著就是下面的商品部分，我們可以使用swiper+scroll-view來完成。

view

swiperbindchange="swiperSwitchTab"

blockwx:key="index"wx:for="{{cates}}"

swiper-itemdata-id="{{item.id}}"wx:key="*this"

!--每個(gè)tab對應(yīng)的商品--

scroll-viewscroll-y="true"bindscroll="contenScrollY"scroll-with-animation="true"

blockwx:for="{{serviceList}}"wx:key="index"

view{{}}/view

/block

/scroll-view

/swiper-item

/block

/swiper

/view

/*內(nèi)容*/

.content{

width:100%;

height:100%;

padding:130rpx0rpx;

box-sizing:border-box;

.content.cont-swiper{

padding:030rpx;

.content.con-item{

width:100%;

height:200rpx;

background-color:rgb(180,140,221);

margin-top:30rpx;

border-radius:20rpx;

line-height:200rpx;

text-align:center;

}

需要注意的問題：

1swiper本身是有高度的，不會因?yàn)閮?nèi)部元素?fù)伍_。

2scroll-viewscroll-y=true是需要給scroll設(shè)置高度。所以代碼中標(biāo)明的橘色是為了說明這個(gè)問題

swiperSwitchTab(e){

//e.detail.currenttab的index

console.log('左右滑動下面商品',e.detail.current)

this.setData({

cur