+
{{ _formatNumber(props.item.statistics.comment_count) }}
{{ _formatNumber(props.item.statistics.comment_count) }}
-
+
{{ _formatNumber(props.item.statistics.share_count) }}
-
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index 542fee7..37b5ebe 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -131,9 +131,9 @@ function touchEnd(e) {
diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue
index 50cedfe..5a4fb5f 100644
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@@ -92,9 +92,9 @@ function touchEnd(e) {
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index b7b2c52..4228bee 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -276,12 +276,17 @@ function touchEnd(e) {
if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {
emit('loadMore')
}
- let addItemIndex = state.localIndex + half
- let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addItemIndex}']`)
- if (!res) {
- slideListEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
- }
- if (state.localIndex > half) {
+
+ // console.log('props.list.length', props.list.length, state.localIndex)
+ if (state.localIndex > half && state.localIndex < props.list.length - half) {
+ let addItemIndex = state.localIndex + half
+ let res = slideListEl.value.querySelector(
+ `.${itemClassName}[data-index='${addItemIndex}']`
+ )
+ if (!res) {
+ slideListEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
+ }
+
let index = slideListEl.value
.querySelector(`.${itemClassName}:first-child`)
.getAttribute('data-index')
@@ -292,15 +297,14 @@ function touchEnd(e) {
})
}
} else {
- let addIndex = state.localIndex - half
- if (addIndex >= 0) {
- let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addIndex}']`)
- if (!res) {
- slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
+ if (state.localIndex >= half && state.localIndex < props.list.length - (half + 1)) {
+ let addIndex = state.localIndex - half
+ if (addIndex >= 0) {
+ let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addIndex}']`)
+ if (!res) {
+ slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
+ }
}
- }
-
- if (state.localIndex >= half) {
let index = slideListEl.value
.querySelector(`.${itemClassName}:last-child`)
.getAttribute('data-index')
@@ -310,27 +314,6 @@ function touchEnd(e) {
_css(item, 'top', (state.localIndex - half) * state.wrapper.height)
})
}
-
- // if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
- // if (!res) {
- // slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
- // let index = slideListEl.value
- // .querySelector(`.${itemClassName}:last-child`)
- // .getAttribute('data-index')
- // appInsMap.get(Number(index)).unmount()
- // // $(slideListEl.value).find(".base-slide-item:last").remove()
- // slideListEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
- // _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
- // })
- // }
- // }
- //
- // if (state.wrapper.childrenLength > props.virtualTotal) {
- // let index = slideListEl.value
- // .querySelector(`.${itemClassName}:last-child`)
- // .getAttribute('data-index')
- // appInsMap.get(Number(index)).unmount()
- // }
}
state.wrapper.childrenLength = slideListEl.value.children.length
}
@@ -353,9 +336,9 @@ function canNext(state, isNext) {
class="slide-list flex-direction-column"
ref="slideListEl"
@click="null"
- @pointerdown="touchStart"
- @pointermove="touchMove"
- @pointerup="touchEnd"
+ @pointerdown.prevent="touchStart"
+ @pointermove.prevent="touchMove"
+ @pointerup.prevent="touchEnd"
>
diff --git a/src/main.ts b/src/main.ts
index c2d291c..dbc27ae 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,7 +17,7 @@ HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEven
if (listener instanceof Function && eventName === 'click') {
args[1] = new Proxy(listener, {
apply(target, ctx, args) {
- // console.log('点击', window.isMoved)
+ console.log('点击', window.isMoved)
if (window.isMoved) return
try {
return target.apply(ctx, args)
diff --git a/src/mock/index.ts b/src/mock/index.ts
index 1606b46..ec64b2c 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -134,14 +134,14 @@ async function fetchData() {
//TODO 有个bug,一开始只返回了6条数据,但第二次前端传过来的pageNo是2了,就是会从第10条数据开始返回,导致中间漏了4条
export async function startMock() {
mock.onGet(/video\/recommended/).reply(async (config) => {
- const page = getPage2(config.params)
- console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), page)
+ const { start, pageSize } = config.params
+ // console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), config.params)
return [
200,
{
data: {
total: 844,
- list: allRecommendVideos.slice(page.offset, page.limit) // list: allRecommendVideos.slice(0, 6),
+ list: allRecommendVideos.slice(start, start + pageSize) // list: allRecommendVideos.slice(0, 6),
},
code: 200,
msg: ''
diff --git a/src/pages/home/slide/SlideList.vue b/src/pages/home/slide/SlideList.vue
index 45a3393..aacdde2 100644
--- a/src/pages/home/slide/SlideList.vue
+++ b/src/pages/home/slide/SlideList.vue
@@ -69,25 +69,25 @@ const state = reactive({
index: props.index,
list: props.list,
totalSize: 0,
- pageSize: 10,
- pageNo: 0
+ pageSize: 10
})
function loadMore() {
+ console.log('load')
if (!baseStore.loading) {
- state.pageNo++
getData()
}
}
async function getData(refresh = false) {
+ if (!refresh && state.totalSize === state.list.length) return
if (baseStore.loading) return
baseStore.loading = true
let res = await props.api({
- pageNo: refresh ? 0 : state.pageNo,
+ start: refresh ? 0 : state.list.length,
pageSize: state.pageSize
})
- // console.log('getSlide4Data-', 'refresh', refresh, res)
+ // console.log('getSlide4Data-', refresh, res, state.totalSize, state.list.length)
baseStore.loading = false
if (res.success) {
state.totalSize = res.data.total
@@ -95,8 +95,6 @@ async function getData(refresh = false) {
state.list = []
}
state.list = state.list.concat(res.data.list)
- } else {
- state.pageNo--
}
}
diff --git a/src/utils/bus.ts b/src/utils/bus.ts
index 82bb7e4..9206d28 100644
--- a/src/utils/bus.ts
+++ b/src/utils/bus.ts
@@ -34,6 +34,7 @@ export default {
this.eventMap = new Map()
},
emit(eventType, val?) {
+ console.log('emit', eventType, val)
const cbs = this.eventMap.get(eventType)
if (cbs) {
cbs.map((cb) => cb(val))
diff --git a/src/utils/hooks/useSlideListItemRender.jsx b/src/utils/hooks/useSlideListItemRender.jsx
index d51357a..dd0be1b 100644
--- a/src/utils/hooks/useSlideListItemRender.jsx
+++ b/src/utils/hooks/useSlideListItemRender.jsx
@@ -1,5 +1,5 @@
import SlideUser from '@/components/slide/SlideUser.vue'
-import BVideo from '@/components/slide/BVideo.vue'
+import BaseVideo from '@/components/slide/BaseVideo.vue'
export function useSlideListItemRender(props) {
return function render(item, index, play, uniqueId) {
@@ -20,7 +20,7 @@ export function useSlideListItemRender(props) {
break
default:
node = (
-