小程序自由滑動的表格

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

 可直接使用源碼，謝絕轉載！