小程序自由滑动的表格

// 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": {} }

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