// 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": {}
}
可直接使用源码，谢绝转载！
查看更多关于【小程序文章/教程】的文章
