目录
系列文章目录
前言
一、vtabs是什么？
二、使用步骤
1.json引入
2.wxml中使用
3.js中代码
总结
前言
商品分类页面，左边分类及右边商品左右联动
因为微信小程序scroll-view没有h5锚点控制联动，并且需求是根据整个页面的滚动条来控制联动，所以使用了页面滚动事件onPageScroll来获取页面的滚动距离，并使用微信小程序组件vtabs和vtabs-content，vtabs获取到每个分类下面的商品模块的高度并根据位置累加
分类
一、vtabs是什么？
vtabs和vtabs-content是微信开发工具的组件，最初是使用scroll-view滑动等来控制左右联动，现在我已改为我所需要的模式。部分原始代码已注释。要使用的页面json需先引入
代码包放到下载地方：https://download.csdn.net/download/Zan_Z/87425550
二、使用步骤
1.json引入
代码如下（示例）：
"mp-vtabs":"/components/weui/vtabs/index",
"mp-vtabs-content":"/components/weui/vtabs-content/index",2.wxml中使用
spcell-block为右侧商品布局组件，使用粘性定位position: sticky;时，父级div不可有overflow: hidden;样式，否则不生效文章来源：https://www.toymoban.com/news/detail-519236.html
代码如下：文章来源地址https://www.toymoban.com/news/detail-519236.html
<mp-vtabs
vtabs="{
{tagLists}}"
activeTab="{
{activeTab}}"
bindtabclick="onTabCLick"
bindchange="onChange"
bindclickScrollTop="clickScrollTop"
class="test"
tab-bar-line-color="{
{zt_color}}"
tab-bar-active-text-color="{
{zt_color}}"
tab-bar-inactive-text-col到了这里，关于小程序商品分类页面滑动左右联动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
