小程序scroll-view左右滑动联动效果

效果图

<view class='cont-pro'>
	<!-- 左侧列表 -->
	<scroll-view scroll-y='true' scroll-with-animation="true" style="width:25%;">
		<view class='pro_left'>
			<view wx:for="{{serviceTypes}}" wx:key='index' class="pro_title {{index==currentLeft?'select':''}}" bindtap='proItemTap' data-pos='{{index}}'>{{item.type}}</view>
		</view>
	</scroll-view>
	<!-- 右侧列表 -->
	<scroll-view scroll-y='true' style="width:75%;" scroll-with-animation="true" scroll-into-view="{{selectId}}" bindscroll="scroll" scroll-top="{{scrollTop}}">
		<view class='pro_right'>
			<view id='{{"item"+index}}' class='pro_box' wx:for="{{serviceTypes}}" wx:for-index="index" wx:key='index' wx:for-item="item">
				<view class="item_title">{{item.type}}</view>
				<view class='pro_item' wx:for="{{item.services}}" wx:for-index="idx" wx:key='idx' wx:for-item="itemName">
					<image class='pro_img' src='{{itemName.img}}'></image>
					<view class='pro_text'>
						<view class='item_name'>{{itemName.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</view>

var app = getApp();
Page({
  heightArr: [],
  distance: 0,
  data: {
    currentLeft: 0, //左侧选中的下标
    selectId: "item0",  //当前显示的元素id
    scrollTop: 0, //到顶部的距离
    serviceTypes: [
      {
        type:"标签1",
        services:[
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",

          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",

          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",

          }
        ]
      },
      {
        type:"标签2",
        services:[
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",

          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",

          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",

          }
        ]
      },
      {
        type:"标签3",
        services:[
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          }
        ]
      },
      {
        type:"标签4",
        services:[
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          }
        ]
      },
      {
        type:"标签5",
        services:[
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          },
          {
            img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
            name:"商品标题",
          }
        ]
      }
    ], //项目列表数据
    staffList: [],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.selectHeight();
  },
  // 左侧标签选择操作锚点定位
  proItemTap(e) {
    this.setData({
      currentLeft: e.currentTarget.dataset.pos,
      selectId: "item" + e.currentTarget.dataset.pos
    })
  },

  //计算右侧每一个分类的高度，在数据请求成功后请求即可
  selectHeight() {
    let that = this;
    this.heightArr = [];
    let h = 0;
    const query = wx.createSelectorQuery();
    query.selectAll('.pro_box').boundingClientRect()
    query.exec(function(res) {
      res[0].forEach((item) => {
        console.log(item,res[0])
        h += item.height;
        that.heightArr.push(h);
      })
      console.log(that.heightArr);
    })
  },
  //监听scroll-view的滚动事件
  scroll(event) {
    if (this.heightArr.length == 0) {
      return;
    }
    let scrollTop = event.detail.scrollTop;
    let current = this.data.currentLeft;
    if (scrollTop >= this.distance) { 
      //页面向上滑动
      //如果右侧当前可视区域最底部到顶部的距离 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
      if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
        this.setData({
          currentLeft: current + 1
        })
      }
    } else { 
      //页面向下滑动
      //如果右侧当前可视区域最顶部到顶部的距离 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
      if (current - 1 >= 0 && scrollTop < this.heightArr[current - 1]) {
        this.setData({
          currentLeft: current - 1
        })
      }
    }
    //更新到顶部的距离
    this.distance = scrollTop;
  }
})

.cont-pro {
  height: 100%;
  display: flex;
  background-color: #fff;
  flex-direction: row;
}

.pro_left {
  width: 100%;
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1rpx solid#eee;
}

.pro_title {
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}

.select {
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  color: #fff;
  background: #f08d31;
}

.pro_right {
  width: 100%;
  background-color: #fff;
  height: 100vh;
}

.item_title {
  width: 100%;
  height: 50px;
  line-height: 100rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.item_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
}

.pro_item {
  width: 100%;
  display: flex;
  padding: 30rpx;
  box-sizing: border-box;
}

.pro_img {
  width: 160rpx;
  height: 160rpx;
  flex-basis: 160rpx;
  flex-shrink: 0;
  border-radius: 4rpx;
  margin-right: 30rpx;
  background-color: #f5f5f5;
}

.pro_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}