fix:修复picker滚动问题
This commit is contained in:
parent
e958f37fb8
commit
a89448cc7d
@ -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)
|
||||||
|
@ -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
|
||||||
|
}
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user