Skip to content

fix(elevator): 修复点击楼层未准确高亮对应的楼层位置信息 #3149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: v4
Choose a base branch
from
Open

fix(elevator): 修复点击楼层未准确高亮对应的楼层位置信息 #3149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
287ab78
fix(elevator): 修复点击楼层未准确高亮对应的楼层位置信息
daiwanxing Jul 18, 2024
9645921
chore: 同步更改 index.vue
daiwanxing Jul 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 17 additions & 21 deletions src/packages/__VUE/elevator/index.taro.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,13 @@
@click="handleClickIndex(item[acceptKey])"
>
{{ item[acceptKey] }}
</view
>
</view>
</view>
</view>
</view>
</template>
<script lang="ts">
import { computed, reactive, toRefs, nextTick, ref, Ref, watch, PropType } from 'vue'
import { computed, reactive, toRefs, ref, Ref, watch, PropType } from 'vue'
import { createComponent } from '@/packages/utils/create'
import { ElevatorData } from './type'
const { create } = createComponent('elevator')
Expand Down Expand Up @@ -117,9 +116,7 @@ export default create({
scrollY: 0
})

const clientHeight = computed(() => {
return listview.value.clientHeight
})
const clientHeight = computed(() => listview.value.clientHeight)

const fixedStyle = computed(() => {
return {
Expand All @@ -135,11 +132,9 @@ export default create({
}

const setListGroup = (el: any) => {
nextTick(() => {
if (!state.listGroup.includes(el) && el != null) {
state.listGroup.push(el)
}
})
if (!state.listGroup.includes(el) && el != null) {
state.listGroup.push(el)
}
}

const calculateHeight = () => {
Expand All @@ -149,7 +144,7 @@ export default create({
for (let i = 0; i < state.listGroup.length; i++) {
state.query.selectAll(`.elevator__item__${i}`).boundingClientRect()
state.query.exec((res) => {
height += Math.floor(res[i][0].height)
height += Math.round(res[i][0].height)
state.listHeight.push(height)
})
}
Expand All @@ -167,8 +162,8 @@ export default create({

const touchStart = (e: TouchEvent) => {
state.scrollStart = true
let index = getData(e.target as HTMLElement)
let firstTouch = e.touches[0]
const index = getData(e.target as HTMLElement)
const firstTouch = e.touches[0]
state.touchState.y1 = firstTouch.pageY
state.anchorIndex = +index
state.codeIndex = +index
Expand Down Expand Up @@ -198,14 +193,15 @@ export default create({
}

const listViewScroll = (e: Event) => {
let target = e.target as Element
let scrollTop = target.scrollTop
const target = e.target as Element
const scrollTop = target.scrollTop
const listHeight = state.listHeight
state.scrollY = Math.floor(scrollTop)
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (state.scrollY >= height1 && state.scrollY < height2) {
const listTotal = listHeight.length
state.scrollY = Math.round(scrollTop)

for (let i = 0; i < listTotal - 1; i++) {
const [startHeight, endHeight] = [listHeight[i], listHeight[i + 1]]
if (state.scrollY >= startHeight && state.scrollY < endHeight) {
state.currentIndex = i
return
}
Expand Down
35 changes: 13 additions & 22 deletions src/packages/__VUE/elevator/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@
<view class="nut-elevator__list__fixed-title">{{ indexList?.[currentIndex]?.[acceptKey] }}</view>
</view>
<view v-show="scrollStart" v-if="indexList.length" class="nut-elevator__code--current">
{{
indexList[codeIndex][acceptKey]
}}
{{ indexList[codeIndex][acceptKey] }}
</view>
<view class="nut-elevator__bars" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
<view class="nut-elevator__bars__inner">
Expand All @@ -36,8 +34,7 @@
@click="handleClickIndex(item[acceptKey])"
>
{{ item[acceptKey] }}
</view
>
</view>
</view>
</view>
</view>
Expand Down Expand Up @@ -96,29 +93,25 @@ export default create({
fixedTop: 0
})

const clientHeight = computed(() => {
return listview.value.clientHeight
})
const clientHeight = computed(() => listview.value.clientHeight)

const getData = (el: HTMLElement, name: string): string | void => {
const prefix = 'data-'
return el.getAttribute(prefix + name) as string
}

const setListGroup = (el: any) => {
nextTick(() => {
if (!state.listGroup.includes(el) && el != null) {
state.listGroup.push(el)
}
})
if (!state.listGroup.includes(el) && el != null) {
state.listGroup.push(el)
}
}

const calculateHeight = () => {
let height = 0
state.listHeight.push(height)
for (let i = 0; i < state.listGroup.length; i++) {
let item = state.listGroup[i]
height += Math.floor(item.clientHeight)
height += Math.round(item.clientHeight)
state.listHeight.push(height)
}
}
Expand Down Expand Up @@ -166,20 +159,18 @@ export default create({
}

const listViewScroll = (e: Event) => {
let target = e.target as Element
let scrollTop = target.scrollTop
const target = e.target as Element
const scrollTop = target.scrollTop
const listHeight = state.listHeight
state.scrollY = scrollTop
state.scrollY = Math.round(scrollTop)
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (state.scrollY >= height1 && state.scrollY < height2) {
const [startHeight, endHeight] = [listHeight[i], listHeight[i + 1]]
if (state.scrollY >= startHeight && state.scrollY < endHeight) {
state.currentIndex = i
state.diff = height2 - state.scrollY
state.diff = endHeight - state.scrollY
return
}
}

state.currentIndex = listHeight.length - 2
}

Expand Down