微信小程序下面商品左右滑动上面tab也跟随变动功能实现

第微信小程序下面商品左右滑动上面tab也跟随变动功能实现小程序下面商品左右滑动上面tab也跟随变动功能

点击tab切换下面的上面信息，商品左右滑动切换上面的tab分类

功能描述：点击tab切换下面的商品信息；滑动下面的商品信息tab也进行切换。

第一步：我们先来说一下上面的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"

!--每个tab对应的商品--

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

/*内容*/

.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本身是有高度的，不会因为内部元素撑开。

2scroll-viewscroll-y=true是需要给scroll设置高度。所以代码中标明的橘色是为了说明这个问题

swiperSwitchTab(e){

//e.detail.currenttab的index

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

this.setData({

cur