小程序数据列表上下滑的内部加左右滑

如图，左边是固定的，右边内容是可以左右滑动的，上面和下面部分也是固定的，整个可以上下滑动。
wxml:

<view class="top">
  <view class='topLeft'></view>
  <scroll-view class='topBox' scroll-x scroll-with-animation scroll-left='{{left}}' bindscroll="scrolling" bindtouchstart='scrollTouchStart' data-scroll='1'>
    <block wx:for='{{groupArr}}' wx:key>
      <view class='topRight'>{{item.company}}</view>
    </block>
  </scroll-view>
</view>
<view class="type">
  <view class="label">品质：</view>
  <block wx:for='{{typeArr}}' wx:key>
    <view class="item {{index==0?'marginLeft':''}} {{activeIndex==index?'cur':''}}" bindtap='chooseType' data-index='{{index}}'>{{item}}</view>
  </block>
</view>
<view class="wrapper">
  <view class="main">
    <view class="left">
      <block wx:for='{{lists}}' wx:key>
        <view class="line1 {{index==lists.length-1?'bottomBorder':''}}">
          <text class='border'>{{item.name}}</text>
        </view>
      </block>
    </view>
    <scroll-view scroll-x class="right" bindscroll="scrolling" scroll-with-animation scroll-left='{{left}}' bindtouchstart='scrollTouchStart' data-scroll='2'>
      <!-- <view class="right-wrapper"> -->
      <block wx:for='{{lists}}' wx:key>
        <view class="line2 {{index==lists.length-1?'bottomBorder':''}}">
          <block wx:for='{{item.priceArr}}' wx:key wx:for-item='price' wx:for-index='index2'>
            <view class='price'>
              {{price}}
              <!-- 最低价的样式 -->
              <image src='/img/[email protected]' class='minPrice' wx:if='{{item.minIndex==index2}}'></image>
              <!-- 建议让ui切图的时候直接带上文字，前端加上的话，第一不好固定位置，第二增加太多页面节点，数据量大的时候就会延长加载时间 -->
              <view class='minPriceText' wx:if='{{item.minIndex==index2}}'>最低</view>
            </view>
          </block>
        </view>
      </block>
      <!-- </view> -->
    </scroll-view>
  </view>
</view>
<view style='width:100%;height:100rpx;'></view>
<view class="bottom">
  <view class='bottomLeft'></view>
  <scroll-view class='bottomBox' scroll-x scroll-with-animation scroll-left='{{left}}' bindscroll="scrolling" bindtouchstart='scrollTouchStart' data-scroll='3'>
    <block wx:for='{{groupArr}}' wx:key>
      <view class='bottomRight'>
        <text class='allCostText'>合计\n</text>
        <text class='allCost'>¥{{item.allCost}}</text>
        <image src='/img/back [email protected]' class='icon'></image>
      </view>
    </block>
  </scroll-view>
</view>

wxss:

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  text-align: center;
  z-index: 3;
  white-space: nowrap;
  background-color: white;
  width: 100%;
  border-bottom: 1px solid #D8D8D8;
}
page{
  overflow-x: hidden;
  width: 100%;
}
.topBox{
  width: 600rpx;
  height: 100rpx;
  float: right;
}
.topLeft{
  width: 150rpx;
  height: 100rpx;
  float: left;
}
.topRight{
  width: 200rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #D8D8D8;
  font-size: 28rpx;
}
.type{
  position: fixed;
  top:100rpx;
  z-index: 3;
  font-size: 28rpx;
  color: #555;
  background: #F9F9F9;
  width: 100%;
  white-space: nowrap;
}
.item{
  display: inline-block;
  padding: 10rpx 20rpx;
  background: #fff;
  border: 1px solid #de5550;
  border-radius: 4px;
  margin-left: 15rpx;
}
.label{
  font-weight: bold;
  line-height: 100rpx;
  padding: 0rpx 20rpx;
  display: inline-block;
}
.marginLeft{
  margin-left: 40rpx;
}
.cur{
  padding: 10rpx 20rpx;
  background: #fff;
  border: 1px solid #de5550;
  border-radius: 4px;
  background-image: url("http://store.ddyc.com/xiaochengxu/cs/2018/0413/icon_bg_label_chosen%403x.png");
  background-position: right bottom;
  background-size: 30rpx 30rpx;
  background-repeat: no-repeat;
}
.wrapper {
  margin-top: 200rpx;
  width: 750rpx;
  overflow-x: hidden;
  position: relative;
  background-color: white;
}

.left {
  position: absolute;
  width: 150rpx;
  z-index: 2;
  background-color: white;
}

.right {
  margin-left: 150rpx;
  width: 600rpx;
}

.right-wrapper {
  overflow-x: auto;
}

.line1 {
  width: 150rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}
.border{
  width: 148rpx;
  height: 98rpx;
  display: block;
  border-top: 1rpx solid #d8d8d8;
  border-right: 1rpx solid #d8d8d8;
}
.line2 {
  height: 100rpx;
  white-space: nowrap;
}

.price {
  width: 200rpx;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  display: inline-block;
  border-top: 1rpx solid #d8d8d8;
  border-right: 1rpx solid #d8d8d8;
  position: relative;
}
.minPrice{
  width: 96rpx;
  height: 80rpx;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.2;
}
.minPriceText{
  width: 56rpx;
  height: 56rpx;
  font-size: 24rpx;
  color: #de5550;
  position: absolute;
  top: -15rpx;
  right: -10rpx;
  transform: rotate(43deg);
}
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  text-align: center;
  z-index: 3;
  white-space: nowrap;
  background-color: white;
  width: 100%;
  border-top: 1rpx solid #d8d8d8;
}
.bottomLeft{
  width: 148rpx;
  height: 100rpx;
  float: left;
  border-left: 1rpx solid #d8d8d8;
}
.bottomBox{
  width: 600rpx;
  height: 100rpx;
  float: left;
}
.bottomRight{
  width: 200rpx;
  height: 100rpx;
  text-align: left;
  display: inline-block;
  border-left: 1rpx solid #d8d8d8;
}
.bottomBorder{
  border-bottom: 1rpx solid #d8d8d8;
}
.icon{
  width: 24rpx;
  height: 24rpx;
  float: right;
  margin-right: 20rpx;
  line-height: 100rpx;
  margin-top: -5rpx;
}
.allCostText{
  font-size: 24rpx;color: #999999;margin-left:30rpx;
}
.allCost{
  font-size: 30rpx;color: #555555;margin-left:30rpx;font-weight:bold;
}

js:

// pages/classification1/classification.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    activeIndex:0,//选择的类型下标
    typeArr: ["原厂原包", "原厂配套", "品牌","适用"],
    // 上面和下面定位的数据，结构可以根据实际接口更改
    groupArr: [
      { company: '西安恒美华城',allCost:900},
      { company: '西安恒美华城', allCost: 900 },
      { company: '西安恒美华城', allCost: 900 },
      { company: '西安恒美华城', allCost: 900 },
    ],
    // 中间内容部分的数据，数据结构以及字段名根据实际接口更改
    lists:[
      {
        type:1,
        name:'轮胎',
        priceArr:[110,190,100,180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '轮胎',
        priceArr: [110, 190, 100, 180],
      },
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList();
  },
  scrollTouchStart:function(e){
    if (e.currentTarget.dataset.scroll != this.data.touchTarget){
      this.setData({
        touchTarget: e.currentTarget.dataset.scroll
      })
    }
  },
  // 
  scrolling:function(e){
    if (e.target.dataset.scroll == this.data.touchTarget){
      this.setData({
        left: e.detail.scrollLeft
      })
    }
  },
  // 点击选择类型
  chooseType:function(e){
    this.setData({
      activeIndex: e.currentTarget.dataset.index
    });
    // this.getList();//重新请求数据
  },
  getList:function(){
    // 请求接口，接收数据并渲染
    var activeIndex = this.data.activeIndex;//当前选择的类型下标，
    //request之后处理数据，如果后台直接返回一行的哪个数据数值最小也就是最便宜的那个，直接渲染，如果后台只是返回具体数字，前端处理一下,如上面的模拟的数据，前端处理
    var lists = this.data.lists;
    for(var i=0;i<lists.length;i++){
      var min = Math.min.apply(null, lists[i].priceArr);
      var index = lists[i].priceArr.indexOf(min);
      lists[i].minIndex = index;
    }
    this.setData({
      lists:lists
    })

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})