feat：table add sticky

components/NormalTable/NormalTable.vue

@@ -3,11 +3,11 @@
 		<NormalTitle :elementInfo="elementInfo"></NormalTitle>
 		<scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
 			<view class="table">
-				<view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
+				<view class= 'tr' :class="[sticky ? 'table_header_sticky' : 'table_header']" v-if="elementInfo.table.tableHeader.showHeader">
 					<template v-for="(item, index) in elementInfo.table.column">
 						<view
 							class="th th_style"
-							:class="[index == 0 ? 'row_fixed': '']"
+							:class="[index == 0 && !sticky ? 'row_fixed': '']"
 							:key="index"
 						>{{item.title}}</view>
 					</template>
@@ -62,7 +62,8 @@
 					left: 'start',
 					center: 'center',
 					right: 'flex-end'
-				}
+				},
+				sticky: false
 			};
 		},
 		computed: {
@@ -91,6 +92,14 @@
 				}
 			},
 		},
+		mounted() {
+			uni.$on(this.elementInfo.id, ({sticky}) => {
+				this.sticky = sticky
+			})
+		},
+		destroy() {
+			uni.$off(elementInfo.id)
+		},
 		methods: {
 			initChart() {
 				const that = this
@@ -172,6 +181,11 @@
 		top: 0;
 		z-index: 2;
 	}
+	.table_header_sticky {
+		position: fixed;
+		top: 0;
+		z-index: 2;
+	}
 	.row_fixed {
 		position: sticky;
 		left: 0;

pages/index/index.vue

@@ -68,7 +68,8 @@
 			return {
 				reportInfo: {},
 				timename: null,
-				pageScrollTop: 0
+				pageScrollTop: 0,
+				stickyTables: []   // 设置了吸顶的table
 			}
 		},
 		computed: {
@@ -215,12 +216,8 @@
 							}, parseInt(info.dataPollingInterval) * 1000)
 						}
 					}
-					res.data.Result.list.forEach(item => {
-						if(item.type === 'DateTimePicker' && item.option.dateTime.showTime) {
-							item.option.dateTime.date = this.dateTimeFormat(item.option.dateTime.date)
-						}
-					})
 					that.reportInfo = res.data.Result
+					that.getStickyTables()
 				}
 			},
 			/**
@@ -256,12 +253,41 @@
 						return item
 					})
 				}
+			},
+			getStickyTables() {
+				this.reportInfo.list.forEach(item=> {
+					// 后端会增加一个表头吸顶的配置，headerSticky=true
+					if(item.type === 'NormalTable' && item.table.tableHeader.headerSticky) {
+						this.stickyTables.push(item)
 					}
+				})
 			},
+		},
+		
 		onPullDownRefresh() {
 			this.getReportCharts()
 		},
 		onPageScroll(res) {
+			if(res.scrollTop > this.pageScrollTop) {
+				// 向上滑动
+				this.stickyTables.forEach(item=> {
+					if(res.scrollTop >= item.top * this.scale) {
+						uni.$emit(item.id,{sticky: true})
+					}
+					if(res.scrollTop >= item.top * this.scale + item.height * this.scale) {
+						uni.$emit(item.id,{sticky: false})
+					}
+				})
+			} else {
+				this.stickyTables.forEach(item=> {
+					if(res.scrollTop < item.top * this.scale + item.height * this.scale) {
+						uni.$emit(item.id,{sticky: true})
+					}
+					if(res.scrollTop < item.top * this.scale) {
+						uni.$emit(item.id,{sticky: false})
+					}
+				})	
+			}
 			this.pageScrollTop = res.scrollTop
 		},
 	}