小程序商品分类页面滑动左右联动_微信小程序实现商品分类页面

目录

系列文章目录

前言

一、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;样式，否则不生效

代码如下：

<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