scroll-view小程序侧边栏（点击加载右侧商品）

结构

<!-- // 滚动条 -->

  <view class='category_list'>

    <!-- // 左侧 -->

    <view class='r_first_category' style="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='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;

   100%;

  height: 100%;

}

.r_first_category {

  background: #f8f8f8;

  height: 100%;

   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 {

   180rpx;

  height: 180rpx;

  overflow: hidden;

  background: #f9f9f9;

  display: flex;

  justify-content: center;

  align-items: center;

}

.list .item .img image {

   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;

   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

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