结构

<!-- // 滚动条 -->
  <view class='category_list'>
    <!-- // 左侧 -->
    <view class='r_first_category' style="width:160rpx">
      <scroll-view lower-threshold='8' bindscrolltolower="getnextgoods"    //通过给scroll-view设置 lower-threshold='8' bindscrolltolower="getnextgoods"触底距离 和触底的滚动事件 实现滚动加载
scroll-y style='height:{{clientHeight}}px;'>
      <view class="r_item {{itemIndex === index ? 'item_active':'' }}" wx:for="{{category_list}}" wx:key='index' data-id="{{item.category_id}}" data-index="{{index}}" bindtap='navChange'>
        {{item.short_name =='' ? item.category_name:item.short_name}}
      </view>
      </scroll-view>
    </view>
    <!-- // 右侧 写到右侧样式 -->
    <view style='width:590rpx;position:absolute;top:0;right:0;flex:1;'>
      <scroll-view scroll-y style='height:{{clientHeight}}px;'>
      <view class='list' wx:for="{{goods_list}}" wx:key='index' wx:for-item="goodItem">
        <view class='item'>
          <view class='img'>
            <image wx:if='{{goodItem.img_list[0]}}' src='{{goodItem.img_list[0]}}'></image>
            <image wx:else src='../../../imgs/nopic.jpg'></image>
          </view>
          <view class='info'>
            <view class='good_name'>{{goodItem.goods_name}}</view>
            <view class='stock_num' wx:if="{{buy_type == 'purchase'}}">
              平台库存：{{goodItem.total_stock}}
            </view>
            <view class='stock_num' wx:if="{{buy_type == 'localgoodssale'}}">
              库存：{{goodItem.total_stock}}
            </view>
            <view class='cell_price'>
              <view class='price' wx:if="{{buy_type == 'purchase'}}">
                平台采购价：¥ {{goodItem.min_price}}
              </view>
              <view class='price' wx:if="{{buy_type == 'localgoodssale'}}">
                零售价：¥ {{goodItem.price}}
              </view>
              <van-icon name="add" color='#1989fa' size='40rpx' data-gooditem='{{goodItem}}' bindtap='goodsSkuShowFun' />
            </view>
          </view>
        </view>
      </view>
      <view class="no_more {{cart_goods_num > 0? 'margin_top':'' }}">
        <span>没有更多了</span>
      </view>
      </scroll-view>
    </view>
  </view>

样式

.category_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.r_first_category {
  background: #f8f8f8;
  height: 100%;
  width: 25%;
  display: inline-block;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.r_first_category .r_item {
  height: 92rpx;
  color: rgba(0, 0, 0, 0.767);
  min-height: 92rpx;
  text-align: center;
  line-height: 46rpx;
  padding: 0 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r_first_category .item_active {
  background-color: #fff;
  color: #ff454e;
}

.list {
  padding: 10rpx;
}

.list .item {
  display: flex;
}

.list .item .img {
  width: 180rpx;
  height: 180rpx;
  overflow: hidden;
  background: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list .item .img image {
  width: 100%;
  height: 100%;
}

.list .item .info {
  margin-left: 20rpx;
  flex: 1;
  position: relative;
}

.list .item .info .good_name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 80rpx;
}

.list .item .info .stock_num {
  font-size: 24rpx;
  color: #323233;
}

.list .item .info .cell_price {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.list .item .info .cell_price .price {
  color: #f44;
}

.no_more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 30rpx 150rpx 30rpx;
  color: #999;
}

方法
onLoad() {

 //获取滚动条可滚动高度
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          // clientHeight: res.windowHeight - res.windowWidth / 750 * 96
          clientHeight: res.windowHeight - 210
        });
      }
    });

}

https://segmentfault.com/a/1190000017943883

小程序滚动组件，左边导航栏与右边内容联动效果实现