微信小程序左右分类滚动列表

左右分别滚动，互不干扰，先把简单的布局和样式搭好。

 1 <view class="page">
 2   <view class="flex_row">
 3     <view class="nav_left" >
 4       <view style="height:1500rpx;">左侧分类</view>
 5     </view> 
 6     <view class="nav_right">
 7       <view class="nav_right_top">右侧顶部分类</view>
 8       <scroll-view class="nav_right_list" scroll-y="true">
 9         <view style="height:1200rpx;">右侧列表</view>
10       </scroll-view>
11     </view>
12   </view>
13 </view>

css样式

1 .flex_row{display: flex;flex-direction: row;}
2 .nav_left{width: 25%;height:100vh;overflow-y:auto; }
3 .nav_right{width: 75%;position: relative;}
4 .nav_right .nav_right_top{padding-top:20rpx;position: fixed;top:0;right:0;width: 75%;height:80rpx;font-size:30rpx;
5 border-bottom: 1px solid #dedede;display:flex;flex-direction:row;white-space: nowrap;background: #fff;z-index: 99}
6 .nav_right_list{margin-top:80rpx;height:calc(100vh - 80rpx);}