Tzu-Yin Hong lili668668

Nickname is 球魚(ballfish, ボール魚, ⚽&🐟)

lili668668 / scroll.vue

Last active August 1, 2019 15:07

虛擬滾動表格的解說程式碼

	<template>
	<div
	ref="viewport"
	:style="{ height: `${viewportHeight}px` }"
	@scroll.passive="onScroll"
	>
	<div
	:style="{ height: `${totalHeight}px` }"
	>
	<section

lili668668 / offset.js

Created August 1, 2019 16:13

計算表格位置的程式碼

	offsetBody () {
	const scrollTop = (this.$refs.viewport as Element).scrollTop
	const remainTopNumber = Math.floor(this.remainLineNumber / 2)
	const remainTopHeight = remainTopNumber * this.renderLineHeight
	const remainBottomHeight = (this.remainLineNumber - remainTopNumber) * this.renderLineHeight
	const thresholdHeight = this.thresholdNumber * this.renderLineHeight
	const gap = scrollTop - this.bodyTranslateY
	const overThreshold = gap < remainTopHeight - thresholdHeight \|\| gap > remainTopHeight + thresholdHeight
	const isReachBottom = this.totalHeight - (scrollTop + this.viewportHeight) < remainBottomHeight
	const isReachTop = scrollTop < remainTopHeight

lili668668 / stickyHeader.vue

Created August 4, 2019 06:55

虛擬表格的標題列

	<template>
	<div
	ref="viewport"
	:style="{ height: `${containerHeight}px` }"
	@scroll.passive="onScroll"
	>
	<table
	:class="$style.header"
	>
	<thead>

lili668668 / stickyHeader2.vue

Created August 4, 2019 07:48

固定標題列

	<template>
	<div>
	<table
	:style="{ maxWidth: `${bodyWidthString}` }"
	>
	<thead ref="head">
	<tr>
	<th
	v-for="(header,index) in headers"
	:key="index"

lili668668 / 程式教學範例1.py

Last active September 12, 2024 15:27