您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 418人已围观

简介 微信小程序下面商品左右滑动上面tab也跟随变动功能实现_javascript技巧_

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

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

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

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

{{item.name}}
/* 分类 */ .cates { position: fixed; z-index: 100; top: 0; white-space: nowrap; width: 100%; padding: 20rpx 30rpx; box-sizing: border-box; font-family: Hiragino Sans GB; background-color: #fff; border-top: 1rpx solid #eee; } .cates .cate-item { display: inline-block; padding: 10rpx 20rpx; 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 来完成。

{{item.name}}
/* 内容 */ .content { width: 100%; height: 100%; padding: 130rpx 0rpx; box-sizing: border-box; } .content .cont-swiper { padding: 0 30rpx; } .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; }

需要注意的问题：

1 swiper 本身是有高度的，不会因为内部元素撑开。

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

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

复制上面代码试试效果吧！

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

您可能感兴趣的文章:

上一篇：react hooks闭包陷阱切入浅谈_React_

下一篇：React官方团队完善原生Hook闭包陷阱_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网