微信小程序左右联动 右边滑动左边自动切换

var that;
//存放右侧分类的高度累加数组
var heightList = [];
//记录scroll-view滚动过程中距离顶部的高度
var distanceToTop = 0;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navtabHeight: 0,
    classIndex: 0,
    toView: 'to0',
    imgList: ['https://img1.baidu.com/it/u=1936620111,432669461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300', 'https://img0.baidu.com/it/u=2937749782,2370328981&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=450', 'https://img0.baidu.com/it/u=2417909680,604866292&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500', 'https://img0.baidu.com/it/u=2937749782,2370328981&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=450'],
    classList: ['蛋白质', '益生菌', '营养快线', '秒杀商品', '蛋白质', '益生菌', '营养快线', '秒杀商品', '蛋白质', '益生菌', '营养快线', '秒杀商品', '蛋白质', '益生菌', '营养快线', '秒杀商品', '益生菌', '营养快线', '秒杀商品',],
    tmpHeightList: []
  },

  // 切换分类
  changeClass(i) {
    // console.log(i);
    const index = i.currentTarget.dataset.index;
    if (this.data.classIndex != i) {
      this.setData({
        classIndex: index,
        toView: 'to' + index
      })
    }
  },
  // y右侧滑动
  scrollShop(e) {
    if (heightList.length == 0) return;
    let scrollTop = e.detail.scrollTop; //滚动位置
    let current = this.data.classIndex;
    if (scrollTop > distanceToTop) {
      //如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
      if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
        this.setData({
          classIndex: current + 1
        })
      }
    } else {
      //如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
      if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
        this.setData({
          classIndex: current - 1
        })
      }
    }
    //更新顶部的距离
    distanceToTop = scrollTop;
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    const height = await wx.getSystemInfo();
    this.setData({
      navtabHeight: height.statusBarHeight + 2,
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let tmpHeightList = [];
    let tmpH = 0; //临时存放每个分类的高度
    const query = wx.createSelectorQuery()
    query.selectAll('.itemsShop').boundingClientRect()
    query.exec(function (res) {
      res[0].forEach((item) => {
        tmpH += item.height;
        // Math.floor()向下取整 【根据个人需要修改】
        tmpHeightList.push(Math.floor(tmpH));
      });
      heightList = tmpHeightList;
      console.log(tmpHeightList, 'tmpHeightListtmpHeightList');
    })
    this.setData({
      tmpHeightList
    })
  },
})

wxml

<view class="content">
  <view class="navtab" style="height: {{navtabHeight}}px"></view>
  <view class="navfelxItem">
    <view class="classText">分类</view>
    <view class="searchFlex">
      <view class="seachIconflex">
        <image src="../../assets/icon/seachIcon.png" class="images"></image>
      </view>
      <view class="message">输入商品名称</view>
    </view>
  </view>
  <view class="flex">
    <!-- 左侧分类标题 -->
    <view class="left_flexItems" style="height: calc(100vh - {{navtabHeight + 40}}px)">
      <view bindtap="changeClass" data-index="{{index}}" wx:for="{{classList}}"  wx:key="index">
        <view id="{{index+1}}" class="{{classIndex == index ? 'textAvtiv clastext' : 'textFonst clastext'}}">{{item}}</view>
        <view style="height: 30rpx;"></view>
      </view>
    </view>

    <!-- 右侧内容 -->
    <scroll-view scroll-into-view="{{toView}}" 	scroll-with-animation scroll-y class="contentas" style="height: calc(100vh - {{navtabHeight + 45}}px)" bindscroll="scrollShop">
      <view class="itemsShop" id="{{'to'+index}}" wx:for-index="index" wx:key="index" wx:for="{{imgList}}">
        <view class="titleImg">
          <image src="{{item}}" class="images"></image>
        </view>
        <!-- 商品列表 -->
        <view class="shopItemFlex" wx:for="{{2}}" wx:for-index="index" wx:key="index">
          <view class="shopPic">
            <image src="https://img2.baidu.com/it/u=2705632896,3523028470&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500" class="images"></image>
          </view>
          <view class="shopTitleprice">
            <view class="shoptitle">哇哈哈营养快线（450g+150g）套装</view>
            <view class="priceFelxitem">
              <view class="priceflex">
                <view class="price">￥389</view>
                <view class="oldprice">￥599</view>
              </view>
              <view class="addCart">加入购物车</view>
            </view>
          </view>
        </view>
      </view>
      <view class="itemsShop">
        <view class="titleImg">
          <image src="https://img0.baidu.com/it/u=2937749782,2370328981&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=450" class="images"></image>
        </view>
        <!-- 商品列表 -->
        <view class="shopItemFlex" wx:for="{{5}}" wx:key="index">
          <view class="shopPic">
            <image src="https://img0.baidu.com/it/u=1621282229,4156226782&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" class="images"></image>
          </view>
          <view class="shopTitleprice">
            <view class="shoptitle">哇哈哈营养快线（450g+150g）套装</view>
            <view class="priceFelxitem">
              <view class="priceflex">
                <view class="price">￥389</view>
                <view class="oldprice">￥599</view>
              </view>
              <view class="addCart">加入购物车</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

css

/* pages/shopClass/index.wxss */
page,
.content {
  background-color: #f8f8f8;
}

.navtab,
.navfelxItem {
  background-color: #fff;
}

.searchFlex {
  display: flex;
  width: 47vw;
  align-items: center;
  background-color: #f8f8f8;
  padding: 10rpx 0 10rpx 20rpx;
  border-radius: 40rpx;
}

.navfelxItem {
  display: flex;
  align-items: center;
  padding-bottom: 10rpx;
}

.images {
  width: 100%;
  height: 100%;
  image-rendering: -webkit-optimize-contrast;
}

.seachIconflex {
  width: 50rpx;
  height: 50rpx;
}

.message {
  color: #8c8e9f;
  margin-left: 15rpx;
  font-size: 28rpx;
}

.classText {
  width: 180rpx;
  font-size: 32rpx;
  text-align: center;
  color: #000;
}

.textFonst {
  background-color: #fff;
}

.textAvtiv {
  border-radius: 50rpx;
  color: #333 !important;
  background-image: linear-gradient(#fdcd8d, #ffd798, #fde7ae);
}

.clastext {
  font-size: 26rpx;
  width: 100%;
  text-align: center;
  padding: 15rpx 0;
  color: #504e4e;
}

.left_flexItems {
  width: 180rpx;
  background-color: #fff;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
}

.left_flexItems::-webkit-scrollbar {
  display: none;
}

.titleImg {
  width: 100%;
  height: 300rpx;
  border-radius: 15rpx;
  overflow: hidden;
}

.contentas {
  flex: 1;
  padding: 20rpx 10rpx 20rpx 15rpx;
  overflow: hidden;
  overflow-y: auto;
}

view {
  box-sizing: border-box;
}

.shopItemFlex {
  display: flex;
  background-color: #fff;
  box-shadow: 2px 4px 2px 1px #d2cccc33;
  margin-top: 20rpx;
  border-radius: 10rpx;
  padding: 15rpx 0 15rpx 15rpx;
}

.shopPic {
  width: 160rpx;
  height: 160rpx;
}

.shopTitleprice {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.shoptitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #333;
  font-size: 28rpx;
  margin-top: 5rpx;
}

.priceFelxitem {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.priceflex {
  display: flex;
  align-items: center;
}

.oldprice {
  font-size: 22rpx;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.price {
  font-size: 28rpx;
  color: red;
}

.addCart {
  padding: 10rpx 20rpx;
  color: #fff;
  font-size: 25rpx;
  background-color: #ff4f1d;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
}

.flexcul {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.itemsShop{
  margin-top: 40rpx;
}
.itemsShop:first-child{
  margin-top: 0rpx !important;
}