小程序自由滑动的表格

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    headerList: [{
      name: '表头一',
      number: 'A201',
      type: "标准间"
    }, {
      name: '表头二',
      number: 'A202',
      type: "大床"
    }, {
      name: '表头三',
      number: 'A203',
      type: "标准间"
    }, {
      name: '表头四',
      number: 'A204',
      type: "大床"
    }, {
      name: '表头五',
      number: 'A205',
      type: "标准间"
    }, {
      name: '表头六',
      number: 'A206',
      type: "大床"
    }],
    list: [
      {
        date: "05-12",
        num: 4,
        week: '周一',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周二',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周三',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周四',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周五',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周六',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周日',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      },
      {
        date: "05-12",
        num: 4,
        week: '周八',
        children: [{
            number: 'A201',
            name: '测试',
            money: '360'
          },
          {
            number: 'A202',
            name: '测试',
            money: '360'
          },
          {
            number: 'A203',
            name: '测试',
            money: '360'
          }, {
            number: 'A204',
            name: '测试',
            money: '360'
          }, {
            number: 'A205',
            name: '测试',
            money: '360'
          }, {
            number: 'A206',
            name: '测试',
            money: '360'
          }
        ]
      }
    ],
    scrollTop: true,
    left: 0
  },
  // 监听左右滚动
  scroll: function (e) {
    let that = this;
    that.setData({
      left: e.detail.scrollLeft,
    })
  },
  // 监听上下滚动
  // onPageScroll (e) { 
  //   let that = this;
  //   if(e.scrollTop>10){
  //     that.setData({
  //       top:e.scrollTop,
  //       scrollTop:false
  //     })
  //   }else{
  //     that.setData({
  //       scrollTop:true
  //     })
  //   }
  //   },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.windowWidth)
        console.log(res.windowWidth / 5)
        that.setData({
          // 设置紫色框 scroll-view 的高度
          wHeight: res.windowWidth,
          width: res.windowWidth / 5,
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

 <!-- pages/test/test.wxml -->
<view class="top flex">
    <view class="top_left" style="width:{{width}}px;">时间段</view>
    <view class="top_right flex" style="width:{{wHeight-width}}px;margin-left:-{{left}}px;">
        <view class="top_info" style="min-width:{{width}}px;" wx:for="{{headerList}}" wx:key="index">
            <view>{{item.name}}</view>
            <view>{{item.number}}</view>
            <view>{{item.type}}</view>
        </view>
    </view>
</view>
<view class="perch"></view>
<view class="bottom flex">
    <view class="bottom_left" style="width:{{width}}px;">
        <view class="bottom_left_date" style="width:{{width}}px;" wx:for="{{list}}" wx:key="index">
            <view>{{item.date}}</view>
            <view>{{item.week}}</view>
            <!-- <view>{{left}}{{item.week}}</view> -->
            <view>剩余{{item.num}}间</view>
        </view>
    </view>
    <scroll-view scroll-x="true" bindscroll="scroll" throttle="{{false}}" class="bottom_right" style="width:{{wHeight-width}}px;">
        <view class="flex">
            <view class="bottom_right_ver" style="min-width:{{width}}px;" wx:for="{{headerList}}" wx:for-index="idx" wx:key="index">
                <view class="bottom_right_ver_info" style="min-width:{{width}}px;" wx:for="{{list}}" wx:key="index">
                        <view>{{item.children[idx].number}}</view>
                        <view>{{item.children[idx].name}}</view>
                        <view>{{item.date}}</view>
                </view>
            </view>
        </view>

    </scroll-view>

</view>

/* pages/test/test.wxss */
.flex{
  display: flex;
  display: -webkit-flex;
}
.top{
  width: 750rpx;
  height: 150rpx;
  border: 1px solid #eee;
  position: fixed;
  z-index: 1001;
}
.top_left{
  height: 150rpx;
  background: #fff;
  z-index: 1001;
}
.top_right{
  height: 150rpx;
}
/* 表头样式 */
.top_info{
  height: 150rpx;
  /* border:1px solid #eee; */
  background: #fff;
  z-index: 101;
}
.perch{
  width: 750rpx;
  height: 150rpx;
}
.bottom{
  width: 750rpx;
}
.bottom_left{
  /* background: #fff; */
}
.bottom_left_date{
  height: 150rpx;
  /* border:1px solid #eee; */
}
.bottom_right{
  /* border:1px solid #eee; */
}
.bottom_right_ver{
  /* border: 1px solid #eee; */
}
.bottom_right_ver_info{
  height: 150rpx;
  /* border:1px solid #eee; */
}

// pages/test/test.json*/

{
  "navigationBarTitleText": "上下左右滑动的表格",
  "navigationBarBackgroundColor": "#eee",
  "backgroundTextStyle": "light",
  "backgroundColor": "#eee",
  "navigationBarTextStyle": "black",
  "usingComponents": {}
}

 可直接使用源码，谢绝转载！