实现微信小程序下面商品左右滑动上面tab也跟随变动功能丨本际云推荐

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

小编介绍

我是本际云服务器推荐网的小编小本本，今天为大家介绍一下如何在小程序中实现商品左右滑动时上面tab也跟随变动的功能，以及如何点击tab切换下面的商品信息。

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

实现步骤

上面的tab部分

我们可以通过使用scroll-view组件并设置scroll-x=”true”来实现上面的tab。

  <scroll-view class="cates" scroll-x="true" scroll-with-animation="true">
    <block wx:for="{{cates}}" wx:key="index">
      <view class="{{item.id === currentId?'cate-item-act cate-item':'cate-item'}}" data-id="{{item.id}}" bindtap="cateChange">{{item.name}}</view>
    </block>
  </scroll-view>

需要注意的是，在CSS样式中设置的cates中position为fixed，用于固定上面的tab位置，同时还要设置z-index来保证层级。

下面的商品部分

我们可以使用swiper和scroll-view来实现下面的商品部分。每个tab对应的商品列表可以使用scroll-view组件完成。

  <swiper class="cont-swiper" bindchange="swiperSwitchTab" style="height:600px;">
    <block wx:key="index" wx:for="{{cates}}">
      <swiper-item class="cont-swiper-item" data-id="{{item.id}}" style="height:100%" wx:key="*this">
        <scroll-view scroll-y="true" style="height:600px;" bindscroll="contenScrollY" scroll-with-animation="true">
          <block wx:for="{{serviceList}}" wx:key="index">
            <view class="con-item">{{item.name}}</view>
          </block>
        </scroll-view>
      </swiper-item>
    </block>
  </swiper>

需要注意的是，在CSS样式中设置的content中padding-top为130rpx，以减小下方商品部分与上方tab的重叠感。