微信小程序商品分类左右联动页面

// js
Page({
      /**
       * 页面的初始数据
       */
      data: {
        cHeight: '0', //屏幕高度
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], //左边楼层
        activeId: 0, //左边楼层ID
        activeScrollTop: '0', //左侧scroll-view滚动的高度
        toView: 'index0', //跳到右边的楼层ID
      },



      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        wx.getSystemInfo({
          success: res => {
            this.setData({
              cHeight: (res.windowHeight - 50) * 0.9 //-50：搜索栏的heigth   0.9：Tabbar的heigth
            })
          }
        })
        let itemArr = []; //纪录每个scroll-into-view的值
        this.data.data.forEach(item => {
          wx.createSelectorQuery().select(`#index${item-1}`).boundingClientRect(rect => {
            let c = {}
            c.offsetTop = rect.top
            c.height = rect.height
            itemArr.push(c)
          }).exec()
        })
        this.setData({
          itemArr
        })
      },
      clickLeft: function (e) { //左侧点击
        let i = e.currentTarget.id
        this.setData({
          activeId: i,
          toView: 'index' + i
        })
      },
      scrollLeft: function (e) {
        this.setData({
          activeScrollTop: e.detail.scrollTop
        })
      },
      scrollRight: function (e) { //右侧滚动
        let {
          itemArr,
          activeId,
        } = this.data;
        this.data.itemArr.forEach((item, id) => { //对比offsetTop和height获得左侧id
            if (e.detail.scrollTop >= (item.offsetTop)-80 && e.detail.scrollTop <= (item.offsetTop + item.height)-80) {
                this.setData({
                  activeId: id
                })
              }
            }) 
            this.setData({
            activeScrollTop: activeId * 40 //左侧高
          })
        }
      })

//wxml
//<l-search-bar placeholder="搜索" shape="circle" l-container-class="search" /> 可不用，如不使用wxss不需要使用margin-top: 50px;还有js中onLoad设置cHeight不需要-50
<!-- 左容器 -->
<scroll-view class='left-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollLeft" scroll-top="{{activeScrollTop}}" enable-back-to-top scroll-with-animation>
	<block wx:for="{{data}}" wx:key="{{index}}">
		<view class='left-son {{activeId == index ? "active" : ""}}' bindtap='clickLeft' id="{{index}}">{{item}}</view>
	</block>
</scroll-view>
<!-- 右容器 -->
<scroll-view class='right-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollRight" scroll-into-view="{{toView}}" enable-back-to-top scroll-with-animation>
	<block wx:for="{{data}}" wx:key="{{index}}">
		<view class='right-son' id="{{'index'+index}}">
		{{index}}
			<view style="display: flex;padding: 15rpx;margin-bottom: 10rpx;" wx:for="{{15}}">
				<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<view style="width: 100%;margin:10rpx 10rpx;height: 90px;">
					<view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
						<view>蔡徐坤{{index}}</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<l-price unit="￥" value="666"></l-price>
							<van-icon name="add-square" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</block>
</scroll-view>

//wxss
.left-scroll{
  background-color: rgb(248,249,250);
	width: 30%;
	float: left;
	margin-top: 50px;
}

.left-son{
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content:space-around;
}

.left-son.active{
	background: #fff;
	border-left:10rpx outset rgb(81, 127, 226);
}

.right-scroll{
  float: right;
	width: 70%;
	margin-top: 50px;
}
.right-son{
	min-height: 100%;
}

//json 可不使用，Lin UI的搜索框和价格文字
{
  "usingComponents": {
    "l-search-bar": "lin-ui/search-bar/index",
    "l-price":"lin-ui/price/index"
  }
}