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

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

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

第一步：我们先来说一下上面的tab,tab我们使用scroll-view scroll-x="true" 就可以。

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

复制代码

1. /* 分类 */
2. .cates {
3.   position: fixed;
4.   z-index: 100;
5.   top: 0;
6.   white-space: nowrap;
7.   width: 100%;
8.   padding: 20rpx 30rpx;
9.   box-sizing: border-box;
10.   font-family: Hiragino Sans GB;
11.   background-color: #fff;
12.   border-top: 1rpx solid #eee;
13. }
14. .cates .cate-item {
15.   display: inline-block;
16.   padding: 10rpx 20rpx;
17.   font-size: 26rpx;
18.   margin-right: 20rpx;
19.   color: #767A84;
20. }
21. .cates .cate-item:last-child{
22.   margin-right: 0rpx;
23. }
24. .cates .cate-item-act {
25.   background: #3293FF;
26.   color: #fff;
27.   border-radius: 48rpx;
28. }

复制代码

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

1. <view class="content">
2.     <swiper class="cont-swiper" bindchange="swiperSwitchTab" style="height: 600px;">
3.       <block wx:key="index" wx:for="{{cates}}">
4.         <swiper-item class="cont-swiper-item" data-id="{{item.id}}" style="height:100%" wx:key="*this">
5.           <!-- 每个tab对应的商品 -->
6.           <scroll-view scroll-y="true" style="height: 600px;" bindscroll="contenScrollY" scroll-with-animation="true">
7.             <block wx:for="{{serviceList}}" wx:key="index">
8.               <view class="con-item">{{item.name}}</view>
9.             </block>
10.           </scroll-view>  
11.         </swiper-item>
12.       </block>
13.     </swiper>
14. </view>

复制代码

1. /* 内容 */
2. .content {
3.   width: 100%;
4.   height: 100%;
5.   padding: 130rpx 0rpx;
6.   box-sizing: border-box;
7. }
8. .content .cont-swiper {
9.   padding: 0 30rpx;
10. }
11. .content .con-item {
12.   width: 100%;
13.   height: 200rpx;
14.   background-color: rgb(180, 140, 221);
15.   margin-top: 30rpx;
16.   border-radius: 20rpx;
17.   line-height: 200rpx;
18.   text-align: center;
19. }

复制代码

需要注意的问题：
1 swiper 本身是有高度的，不会因为内部元素撑开。
2 scroll-view scroll-y="true" 是需要给scroll设置高度。所以代码中标明的橘色是为了说明这个问题

1. swiperSwitchTab(e){
2.     // e.detail.current tab的index
3.     console.log('左右滑动下面商品',e.detail.current)
4.     this.setData({
5.       currentId: this.data.cates[e.detail.current].id
6.     })
7.     // 根据id去调用接口，替换listData数据　　 this.getData();}

复制代码

复制上面代码试试效果吧！
到此这篇关于小程序下面商品左右滑动上面tab也跟随变动功能的文章就介绍到这了,更多相关小程序tab内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！