mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
refactor: ♻️ 索引栏支持侧边栏滑动时同步滚动列表
This commit is contained in:
xuqingkai
parent
19b9f19646
commit
ab47b68b87
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-07-27 10:26:09
|
||||
* @LastEditTime: 2024-05-07 17:05:08
|
||||
* @LastEditTime: 2024-05-20 13:18:53
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\docs\.vitepress\config.mts
|
||||
@ -251,7 +251,7 @@ export default defineConfig({
|
||||
link: "/component/backtop",
|
||||
text: "Backtop 回到顶部"
|
||||
}, {
|
||||
link: "/component/indexBar",
|
||||
link: "/component/index-bar",
|
||||
text: "IndexBar 索引栏"
|
||||
}]
|
||||
}, {
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
```vue
|
||||
<template>
|
||||
<view class="wraper">
|
||||
<wd-index-bar>
|
||||
<view v-for="item in data" :key="item.index" class="city-wrap">
|
||||
<wd-index-bar sticky>
|
||||
<view v-for="item in data" :key="item.index">
|
||||
<wd-index-anchor :index="item.index" />
|
||||
<view v-for="city in item.data" class="city" :key="city">{{ city }}</view>
|
||||
<wd-cell border clickable v-for="city in item.data" :key="city" :title="city" @click="handleClick(item.index, city)"></wd-cell>
|
||||
</view>
|
||||
</wd-index-bar>
|
||||
</view>
|
||||
@ -117,26 +117,11 @@ const data = ref([
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.city {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wraper {
|
||||
height: calc(100vh - var(--window-top));
|
||||
height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
|
||||
height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
|
||||
.wot-theme-dark {
|
||||
.city {
|
||||
color: white;
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<page-wraper>
|
||||
<view class="wraper">
|
||||
<wd-index-bar sticky>
|
||||
<view v-for="item in data" :key="item.index" class="city-wrap">
|
||||
<view v-for="item in data" :key="item.index">
|
||||
<wd-index-anchor :index="item.index" />
|
||||
<view v-for="city in item.data" class="city" :key="city" @click="handleClick(item.index, city)">{{ city }}</view>
|
||||
<wd-cell border clickable v-for="city in item.data" :key="city" :title="city" @click="handleClick(item.index, city)"></wd-cell>
|
||||
</view>
|
||||
</wd-index-bar>
|
||||
</view>
|
||||
@ -111,23 +111,9 @@ function handleClick(index: string, city: string) {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.city {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wraper {
|
||||
height: calc(100vh - var(--window-top));
|
||||
height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
|
||||
height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.wot-theme-dark {
|
||||
.city {
|
||||
color: white;
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,21 +21,7 @@
|
||||
// #endif
|
||||
|
||||
@include b(index-anchor) {
|
||||
background-color: $-color-gray-3;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: $-color-title;
|
||||
|
||||
@include when(sticky){
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(index-anchor) {
|
||||
background-color: $-color-gray-3;
|
||||
background-color: $-color-gray-2;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: $-color-title;
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-DINGTALK -->
|
||||
<view :class="`wd-index-anchor-ding ${indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === index ? 'is-sticky' : ''}`">
|
||||
<view :class="`wd-index-anchor-ding ${isSticky ? 'is-sticky' : ''}`">
|
||||
<!-- #endif -->
|
||||
<view
|
||||
:class="`wd-index-anchor ${indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === index ? 'is-sticky' : ''} ${customClass}`"
|
||||
:style="customStyle"
|
||||
:id="indexAnchorId"
|
||||
>
|
||||
<view :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`" :style="customStyle" :id="indexAnchorId">
|
||||
<slot>
|
||||
{{ index }}
|
||||
</slot>
|
||||
@ -18,7 +14,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { indexAnchorProps } from './type'
|
||||
import { onMounted, getCurrentInstance, ref } from 'vue'
|
||||
import { onMounted, getCurrentInstance, ref, computed } from 'vue'
|
||||
import { indexBarInjectionKey } from '../wd-index-bar/type'
|
||||
import { getRect, isDef, uuid } from '../common/util'
|
||||
import { useParent } from '../composables/useParent'
|
||||
@ -31,6 +27,10 @@ const indexAnchorId = ref<string>(`indexBar${uuid()}`)
|
||||
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const isSticky = computed(() => {
|
||||
return indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === props.index
|
||||
})
|
||||
|
||||
function getInfo() {
|
||||
getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
|
||||
if (isDef(indexBar)) {
|
||||
|
||||
@ -100,7 +100,11 @@ function getAnchorByPageY(pageY: number) {
|
||||
|
||||
function handleTouchMove(e: TouchEvent) {
|
||||
const clientY = e.touches[0].pageY
|
||||
if (state.activeIndex === getAnchorByPageY(clientY).index) {
|
||||
return
|
||||
}
|
||||
state.activeIndex = getAnchorByPageY(clientY).index
|
||||
scrollTop.value = getAnchorByPageY(clientY).top - offsetTop
|
||||
}
|
||||
|
||||
function handleTouchEnd(e: TouchEvent) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user