+
-
+
{{ _formatNumber(props.item.statistics.digg_count) }}
-
+
+
{{ _formatNumber(props.item.statistics.share_count) }}
-
{{ _formatNumber(props.item.statistics.share_count) }}
+
-
+
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index 4228bee..ef0c3ad 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -335,7 +335,6 @@ function canNext(state, isNext) {
{
+ const page = getPage2(config.params)
+ return [
+ 200,
+ {
+ data: {
+ total: 844,
+ list: allRecommendVideos.slice(page.offset, page.limit)
+ },
+ code: 200,
+ msg: ''
+ }
+ ]
+ })
mock.onGet(/video\/comments/).reply(async (config) => {
const videoIds = [
diff --git a/src/pages/home/slide/LongVideo.vue b/src/pages/home/slide/LongVideo.vue
index a5063df..6e05083 100644
--- a/src/pages/home/slide/LongVideo.vue
+++ b/src/pages/home/slide/LongVideo.vue
@@ -1,7 +1,7 @@
-
+
diff --git a/src/utils/bus.ts b/src/utils/bus.ts
index 9206d28..2f29c1b 100644
--- a/src/utils/bus.ts
+++ b/src/utils/bus.ts
@@ -34,7 +34,7 @@ export default {
this.eventMap = new Map()
},
emit(eventType, val?) {
- console.log('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/useClick.ts b/src/utils/hooks/useClick.ts
new file mode 100644
index 0000000..5383aa0
--- /dev/null
+++ b/src/utils/hooks/useClick.ts
@@ -0,0 +1,18 @@
+import { _stopPropagation } from '@/utils'
+
+//解决SlideVerticalInfinite组件，每次滑动之后，click事件总是要等到2秒之后点击会发触发的bug
+//具体原因未知
+export function useClick() {
+ return {
+ mounted: function (el: HTMLElement, binding: any) {
+ el.addEventListener('pointerdown', (e) => _stopPropagation(e))
+ el.addEventListener('pointerup', (e) => {
+ _stopPropagation(e)
+ binding.value?.()
+ })
+ },
+ unmounted(el: HTMLDivElement) {
+ el = null
+ }
+ }
+}
diff --git a/src/utils/mixin.ts b/src/utils/mixin.ts
index b78c6fb..5a5ea68 100644
--- a/src/utils/mixin.ts
+++ b/src/utils/mixin.ts
@@ -10,7 +10,7 @@ import BaseButton from '../components/BaseButton.vue'
import CONST_VAR from './const_var'
import Dom from './dom'
import bus, { EVENT_KEY } from './bus'
-import { random } from '@/utils'
+import { _stopPropagation, random } from '@/utils'
import { Icon } from '@iconify/vue'
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
@@ -104,11 +104,13 @@ export default {
}
},
love: {
- beforeMount: function (el: HTMLDivElement, binding) {
+ mounted: function (el: HTMLDivElement, binding) {
let isDbClick = false
let clickTimer = null
let dbClickTimer = null
let lastClickTime = null
+ let isDown = false
+ let isMove = false
const checkTime = 200
const dbCheckCancelTime = 500
@@ -141,13 +143,22 @@ export default {
dbClickTimer = setTimeout(() => (isDbClick = false), dbCheckCancelTime)
} else {
clickTimer = setTimeout(() => {
- console.log('单击', binding.value)
+ // console.log('单击', binding.value)
bus.emit(EVENT_KEY.SINGLE_CLICK, binding.value)
}, checkTime)
}
lastClickTime = nowTime
}
- el.addEventListener('click', check)
+
+ const up = (e) => {
+ if (!isDown) return
+ if (!isMove) check(e)
+ isMove = isDown = false
+ }
+
+ el.addEventListener('pointerdown', () => (isDown = true))
+ el.addEventListener('pointermove', () => isDown && (isMove = true))
+ el.addEventListener('pointerup', up)
}
}
}
diff --git a/src/utils/slide.ts b/src/utils/slide.ts
index b46c6b1..7ea743f 100644
--- a/src/utils/slide.ts
+++ b/src/utils/slide.ts
@@ -79,7 +79,7 @@ function canNext(state, isNext) {
* @param state
*/
export function slideTouchStart(e, el, state) {
- // console.log('e', e, state.name)
+ // console.log('start', state.name)
if (!checkEvent(e)) return
_css(el, 'transition-duration', `0ms`)
//记录起点坐标，用于move事件计算移动距离
@@ -107,9 +107,9 @@ export function slideTouchMove(
notNextCb = null,
slideOtherDirectionCb = null
) {
+ console.log('move', state.name)
if (!checkEvent(e)) return
if (!state.isDown) return
- // console.log('move', state.name)
//计算移动距离
state.move.x = e.touches[0].pageX - state.start.x
@@ -174,15 +174,15 @@ export function slideTouchMove(
export function slideTouchEnd(e, state, canNextCb = null, nextCb = null, notNextCb = null) {
if (!checkEvent(e)) return
if (!state.isDown) return
-
- const isHorizontal = state.type === SlideType.HORIZONTAL
- const isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
+ // console.log('end', state.name)
if (state.next) {
+ const isHorizontal = state.type === SlideType.HORIZONTAL
+ const isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
//同move事件
if (!canNextCb) canNextCb = canNext
if (canNextCb(state, isNext)) {
- //能滑动，那就把事件捕获，不能给父组件处理
+ //2024-04-25：换成pointer事件之后不能捕获了，需要让父组件重置自己的isDown，不然PC上move事件会一直触发
// _stopPropagation(e)
//结合时间、距离来判断是否成功滑动