MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refactor code and add comment

Browse Source
This commit is contained in:
zyronon 2024-04-24 02:32:47 +08:00
parent 942ae76a0d
commit 15b89986b2
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Posters.vue
View File

@ -92,7 +92,7 @@ function getMonth(time) {
.poster-item { .poster-item {
height: 200rem; height: 200rem;
max-height: calc(33.33vw * 1.2); max-height: calc(33.33vw * 1.3);
border: 0.5px solid black; border: 0.5px solid black;
overflow: hidden; overflow: hidden;
position: relative; position: relative;

37
src/components/slide/SlideVerticalInfinite.vue
View File

@ -78,27 +78,32 @@ watch(
() => props.list, () => props.list,
(newVal, oldVal) => { (newVal, oldVal) => {
// console.log('watch-list', newVal.length, oldVal.length, newVal) // console.log('watch-list', newVal.length, oldVal.length, newVal)
//新数据比老数据小，是刷新 //新数据长度比老数据长度小，说明是刷新
if (newVal.length < oldVal.length) { if (newVal.length < oldVal.length) {
insertContent() insertContent()
} else { } else {
//没数据就直接插入
if (oldVal.length === 0) { if (oldVal.length === 0) {
insertContent() insertContent()
} else { } else {
let lastSlideItem = wrapperEl.value.querySelector(`.${itemClassName}:last-child`) // 走到这里，说明是通过接口加载了下一页的数据，
let top = _css(lastSlideItem, 'top') // 为了在用户快速滑动时，无需频繁等待请求接口加载数据，给用户更好的使用体验
let lastIndex = Number(lastSlideItem.getAttribute('data-index')) + 1 // 这里额外加载3条数据。所以此刻，html里面有原本的5个加新增的3个，一共8个dom
// console.log('lastIndex', lastIndex) // 用户往下滑动时只删除前面多余的dom，等滑动到临界值（virtualTotal/2+1）时，再去执行新增逻辑
newVal.slice(lastIndex, lastIndex + 3).map((item, index) => { // let lastSlideItem = wrapperEl.value.querySelector(`.${itemClassName}:last-child`)
let el = getInsEl(item, lastIndex + index) // let top = _css(lastSlideItem, 'top')
//这里必须要设置个top值，不然会把前面的条目给覆盖掉 // let newListStartIndex = Number(lastSlideItem.getAttribute('data-index')) + 1
//2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值， // // console.log('newListStartIndex', newListStartIndex)
//因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还 // newVal.slice(newListStartIndex, newListStartIndex + 3).map((item, index) => {
// 计算top值的，会和前面的对不上 // let el = getInsEl(item, newListStartIndex + index)
_css(el, 'top', top) // //这里必须要设置个top值，不然会把前面的条目给覆盖掉
wrapperEl.value.appendChild(el) // //2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
state.wrapper.childrenLength++ // //因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
}) // // 计算top值的，会和前面的对不上
// _css(el, 'top', top)
// wrapperEl.value.appendChild(el)
// state.wrapper.childrenLength++
// })
} }
} }
} }
@ -129,6 +134,7 @@ watch(
watch( watch(
() => props.active, () => props.active,
(newVal) => { (newVal) => {
//当激活此页时，如果list为空，那么向上发射事件通知父组件请求数据
if (newVal && !props.list.length) { if (newVal && !props.list.length) {
return emit('refresh') return emit('refresh')
} }
@ -147,7 +153,6 @@ watch(
onMounted(() => { onMounted(() => {
slideInit(wrapperEl.value, state) slideInit(wrapperEl.value, state)
insertContent()
}) })
function insertContent(list = props.list) { function insertContent(list = props.list) {