diff --git a/uniapp/src/pages/index/index.vue b/uniapp/src/pages/index/index.vue index 4f516e7..00f112c 100644 --- a/uniapp/src/pages/index/index.vue +++ b/uniapp/src/pages/index/index.vue @@ -14,7 +14,10 @@ - + @@ -177,6 +180,12 @@ const loading = ref(false) const noMore = ref(false) const pageNo = ref(1) const pageSize = 10 +const channelScrollLeft = ref(0) +const channelDragging = ref(false) +let channelDragStartX = 0 +let channelDragStartScrollLeft = 0 +let channelDragMoved = false +let channelDragBlockedUntil = 0 const primaryChannels = computed(() => { return allChannels.value @@ -241,7 +250,40 @@ const loadFocusMatches = async () => { } } +const handleChannelScroll = (event: any) => { + const nextScrollLeft = Number(event?.detail?.scrollLeft ?? event?.target?.scrollLeft ?? 0) + if (Number.isFinite(nextScrollLeft)) { + channelScrollLeft.value = nextScrollLeft + } +} + +const startChannelDrag = (event: any) => { + if (typeof event?.button === 'number' && event.button !== 0) return + channelDragging.value = true + channelDragMoved = false + channelDragStartX = Number(event?.clientX ?? 0) + channelDragStartScrollLeft = channelScrollLeft.value +} + +const moveChannelDrag = (event: any) => { + if (!channelDragging.value) return + const offsetX = Number(event?.clientX ?? channelDragStartX) - channelDragStartX + if (Math.abs(offsetX) < 3) return + channelDragMoved = true + event?.preventDefault?.() + channelScrollLeft.value = Math.max(0, channelDragStartScrollLeft - offsetX) +} + +const endChannelDrag = () => { + if (!channelDragging.value) return + channelDragging.value = false + if (channelDragMoved) { + channelDragBlockedUntil = Date.now() + 250 + } +} + const switchChannel = (index: number) => { + if (Date.now() < channelDragBlockedUntil) return if (currentChannel.value === index) return currentChannel.value = index reloadFeed() @@ -494,6 +536,12 @@ onUnload(() => uni.$off('channelChanged', onChannelChanged)) min-width: 0; height: 86rpx; white-space: nowrap; + cursor: grab; + user-select: none; + + &--dragging { + cursor: grabbing; + } } &__list {