fix:修复picker滚动问题

This commit is contained in:
chaorenluo 2024-10-31 15:20:38 +08:00
parent e958f37fb8
commit a89448cc7d
3 changed files with 31 additions and 10 deletions

View File

@ -1,20 +1,19 @@
<template> <template>
<div class="list" ref="list"> <div class="list" ref="list">
<ul :style="state.ulStyle"> <ul :style="state.ulStyle">
<li v-for="(item, index) in props.column" :key="'item' + index" @click="setTop(index)">{{ item.text }}</li> <li v-for="(item, index) in props.column" :key="'item' + index" >{{ item.text }}</li>
</ul> </ul>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, computed, onMounted, ref, watch, onBeforeUnmount } from 'vue' import { reactive, computed, onMounted, ref, watch, onBeforeUnmount } from 'vue'
import { getClient, START_EVENT, MOVE_EVENT, END_EVENT } from './utils' import { getClient, START_EVENT, MOVE_EVENT, END_EVENT,isPC } from './utils'
import { isMobile as isInMobile } from '@/render/utils/index'
const DEFAULT_DURATION = 200 const DEFAULT_DURATION = 200
const LIMIT_TIME = 300 const LIMIT_TIME = 300
const LIMIT_DISTANCE = 15 const LIMIT_DISTANCE = 15
const IS_Mobile = isInMobile() const IS_PC = isPC()
const props = defineProps({ const props = defineProps({
@ -85,7 +84,7 @@ const handleStart = (e) => {
state.ulStyle.transitionDuration = `0ms` state.ulStyle.transitionDuration = `0ms`
state.ulStyle.transitionProperty = `none` state.ulStyle.transitionProperty = `none`
if (!IS_Mobile) { if (IS_PC) {
document.addEventListener(MOVE_EVENT, handleMove, false) document.addEventListener(MOVE_EVENT, handleMove, false)
document.addEventListener(END_EVENT, handleEnd, false) document.addEventListener(END_EVENT, handleEnd, false)
} }
@ -114,7 +113,7 @@ const handleMove = (e) => {
} }
const handleEnd = () => { const handleEnd = () => {
if (!IS_Mobile) { if (IS_PC) {
document.removeEventListener(MOVE_EVENT, handleMove, false) document.removeEventListener(MOVE_EVENT, handleMove, false)
document.removeEventListener(END_EVENT, handleEnd, false) document.removeEventListener(END_EVENT, handleEnd, false)
} }
@ -195,7 +194,7 @@ const mousewheel = (e) => {
onMounted(() => { onMounted(() => {
init(); init();
list.value.addEventListener(START_EVENT, handleStart, false) list.value.addEventListener(START_EVENT, handleStart, false)
if (!IS_Mobile) { if (IS_PC) {
list.value.addEventListener('wheel', mousewheel, false) list.value.addEventListener('wheel', mousewheel, false)
} else { } else {
list.value.addEventListener(MOVE_EVENT, handleMove, false) list.value.addEventListener(MOVE_EVENT, handleMove, false)
@ -205,7 +204,7 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
list.value.removeEventListener(START_EVENT, handleStart, false) list.value.removeEventListener(START_EVENT, handleStart, false)
if (!IS_Mobile) { if (IS_PC) {
list.value.removeEventListener('wheel', mousewheel, false) list.value.removeEventListener('wheel', mousewheel, false)
list.value.removeEventListener(MOVE_EVENT, handleMove, false) list.value.removeEventListener(MOVE_EVENT, handleMove, false)
list.value.removeEventListener(END_EVENT, handleEnd, false) list.value.removeEventListener(END_EVENT, handleEnd, false)

View File

@ -14,3 +14,16 @@ export const getClient = (e:any) => {
y: clientY y: clientY
} }
} }
export const isPC = () => {
const userAgentInfo = navigator.userAgent
const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
let flag = true
for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
return flag
}

View File

@ -50,7 +50,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, nextTick, onMounted, computed } from 'vue' import { ref, nextTick, onMounted, computed,onBeforeUnmount } from 'vue'
import Picker from '@/management/pages/edit/components/Picker/index.vue' import Picker from '@/management/pages/edit/components/Picker/index.vue'
import { isMobile as isInMobile } from '@/render/utils/index' import { isMobile as isInMobile } from '@/render/utils/index'
const props = defineProps({ const props = defineProps({
@ -73,7 +73,7 @@ const valList = ref([]);
const pickPop = ref(false) const pickPop = ref(false)
const listPop = ref([]) const listPop = ref([])
const pickIndex = ref(-1) const pickIndex = ref(-1)
const isMobile = isInMobile() const isMobile = ref(isInMobile())
const placeholderList = computed(() => { const placeholderList = computed(() => {
return props.multilevelData.placeholder return props.multilevelData.placeholder
@ -119,12 +119,21 @@ const showPickPop = (list, index) => {
pickIndex.value = index pickIndex.value = index
} }
const updateEquipment = () => {
isMobile.value = isInMobile()
}
onMounted(() => { onMounted(() => {
window.addEventListener('resize', updateEquipment)
placeholderList.value.map(() => { placeholderList.value.map(() => {
valList.value.push(null) valList.value.push(null)
}) })
}) })
onBeforeUnmount(() => {
window.removeEventListener('resize', updateEquipment)
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>