347 lines
10 KiB
Vue
347 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
|
|||
|
|
<view>
|
|||
|
|
<view class="u-index-bar">
|
|||
|
|
<slot />
|
|||
|
|
<view
|
|||
|
|
v-if="showSidebar"
|
|||
|
|
class="u-index-bar__sidebar"
|
|||
|
|
@touchstart.stop.prevent="onTouchMove"
|
|||
|
|
@touchmove.stop.prevent="onTouchMove"
|
|||
|
|
@touchend.stop.prevent="onTouchStop"
|
|||
|
|
@touchcancel.stop.prevent="onTouchStop"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in indexList"
|
|||
|
|
:key="index"
|
|||
|
|
class="u-index-bar__index"
|
|||
|
|
:style="{ zIndex: Number(zIndex) + 1, color: activeAnchorIndex === index ? activeColor : '' }"
|
|||
|
|
:data-index="index"
|
|||
|
|
>
|
|||
|
|
{{ item }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="u-indexed-list-alert"
|
|||
|
|
v-if="touchmove && indexList[touchmoveIndex]"
|
|||
|
|
:style="{
|
|||
|
|
zIndex: alertZIndex
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<text>{{ indexList[touchmoveIndex] }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-index-list',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue';
|
|||
|
|
import { $u, useParent } from '../..';
|
|||
|
|
import { IndexListProps } from './types';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* indexList 索引列表
|
|||
|
|
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
|
|||
|
|
* @tutorial https://uviewpro.cn/zh/components/indexList.html#indexanchor-props
|
|||
|
|
* @property {Number|String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
|
|||
|
|
* @property {Array} index-list 索引字符列表，数组（默认A-Z）
|
|||
|
|
* @property {Number|String} z-index 锚点吸顶时的层级（默认965）
|
|||
|
|
* @property {Boolean} sticky 是否开启锚点自动吸顶（默认true）
|
|||
|
|
* @property {Number|String} offset-top 锚点自动吸顶时与顶部的距离（默认0）
|
|||
|
|
* @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认主题色primary）
|
|||
|
|
* @event {Function} select 选中右边索引字符时触发
|
|||
|
|
* @example <u-index-list :scrollTop="scrollTop"></u-index-list>
|
|||
|
|
*/
|
|||
|
|
const props = defineProps(IndexListProps);
|
|||
|
|
const emit = defineEmits(['select']);
|
|||
|
|
const instance = getCurrentInstance();
|
|||
|
|
|
|||
|
|
// 索引列表生成函数
|
|||
|
|
function getIndexList() {
|
|||
|
|
const indexList: string[] = [];
|
|||
|
|
const charCodeOfA = 'A'.charCodeAt(0);
|
|||
|
|
for (let i = 0; i < 26; i++) {
|
|||
|
|
indexList.push(String.fromCharCode(charCodeOfA + i));
|
|||
|
|
}
|
|||
|
|
return indexList;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 变量定义
|
|||
|
|
const activeAnchorIndex = ref(0);
|
|||
|
|
const showSidebar = ref(true);
|
|||
|
|
const touchmove = ref(false);
|
|||
|
|
const touchmoveIndex = ref(0);
|
|||
|
|
const sidebar = reactive<{ height: number; top: number }>({ height: 0, top: 0 });
|
|||
|
|
const scrollToAnchorIndex = ref<number | null>(null);
|
|||
|
|
const timer = ref<any>(null);
|
|||
|
|
const top = ref(0);
|
|||
|
|
const height = ref(0);
|
|||
|
|
const stickyOffsetTop = ref(0);
|
|||
|
|
|
|||
|
|
// 计算属性
|
|||
|
|
// 弹出toast的z-index值
|
|||
|
|
const alertZIndex = computed(() => $u.zIndex.toast).value;
|
|||
|
|
// indexList 响应式
|
|||
|
|
const indexList = computed(() => props?.indexList ?? getIndexList());
|
|||
|
|
const zIndex = computed(() => props.zIndex).value;
|
|||
|
|
const activeColor = computed(() => props.activeColor).value;
|
|||
|
|
|
|||
|
|
const { children, broadcast } = useParent('u-index-anchor');
|
|||
|
|
|
|||
|
|
// 兼容 H5/非H5 stickyOffsetTop
|
|||
|
|
onMounted(() => {
|
|||
|
|
const offsetTopNum = typeof props.offsetTop === 'string' ? Number(props.offsetTop) : props.offsetTop;
|
|||
|
|
// #ifdef H5
|
|||
|
|
stickyOffsetTop.value = offsetTopNum ? uni.upx2px(offsetTopNum) : 44;
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef H5
|
|||
|
|
stickyOffsetTop.value = offsetTopNum ? uni.upx2px(offsetTopNum) : 0;
|
|||
|
|
// #endif
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听 scrollTop
|
|||
|
|
watch(
|
|||
|
|
() => props.scrollTop,
|
|||
|
|
() => {
|
|||
|
|
updateData();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function updateData() {
|
|||
|
|
if (timer.value) clearTimeout(timer.value);
|
|||
|
|
timer.value = setTimeout(() => {
|
|||
|
|
showSidebar.value = !!children.length;
|
|||
|
|
setRect().then(() => {
|
|||
|
|
onScroll();
|
|||
|
|
});
|
|||
|
|
}, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取各区域尺寸
|
|||
|
|
*/
|
|||
|
|
function setRect() {
|
|||
|
|
return Promise.all([setAnchorsRect(), setListRect(), setSiderbarRect()]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取锚点尺寸
|
|||
|
|
*/
|
|||
|
|
function setAnchorsRect() {
|
|||
|
|
return Promise.all(
|
|||
|
|
children.map((anchor, index) => {
|
|||
|
|
$u.getRect('.u-index-anchor-wrapper', anchor.getInstance()).then((rect: any) => {
|
|||
|
|
broadcast('setTop', rect.top, anchor.id);
|
|||
|
|
broadcast('setHeight', rect.height, anchor.id);
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取列表尺寸
|
|||
|
|
*/
|
|||
|
|
function setListRect() {
|
|||
|
|
return $u.getRect('.u-index-bar', instance).then((rect: any) => {
|
|||
|
|
height.value = rect.height;
|
|||
|
|
top.value = rect.top + Number(props.scrollTop);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取侧边栏尺寸
|
|||
|
|
*/
|
|||
|
|
function setSiderbarRect() {
|
|||
|
|
return $u.getRect('.u-index-bar__sidebar', instance).then((rect: any) => {
|
|||
|
|
sidebar.height = rect.height;
|
|||
|
|
sidebar.top = rect.top;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取当前激活锚点索引
|
|||
|
|
*/
|
|||
|
|
function getActiveAnchorIndex() {
|
|||
|
|
const sticky = props.sticky;
|
|||
|
|
for (let i = children.length - 1; i >= 0; i--) {
|
|||
|
|
const preAnchorHeight = i > 0 ? children[i - 1].getExposed().height.value : 0;
|
|||
|
|
const reachTop = sticky ? preAnchorHeight : 0;
|
|||
|
|
if (reachTop >= children[i].getExposed().top.value) {
|
|||
|
|
return i;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 滚动时处理锚点吸顶和样式
|
|||
|
|
*/
|
|||
|
|
function onScroll() {
|
|||
|
|
if (!children.length) return;
|
|||
|
|
const sticky = props.sticky;
|
|||
|
|
const scrollTopNum = Number(props.scrollTop);
|
|||
|
|
const active = getActiveAnchorIndex();
|
|||
|
|
activeAnchorIndex.value = active;
|
|||
|
|
if (sticky) {
|
|||
|
|
let isActiveAnchorSticky = false;
|
|||
|
|
if (active !== -1) {
|
|||
|
|
isActiveAnchorSticky = children[active].getExposed().top.value <= 0;
|
|||
|
|
}
|
|||
|
|
children.forEach((item, index) => {
|
|||
|
|
if (index === active) {
|
|||
|
|
let wrapperStyle: any = '';
|
|||
|
|
let anchorStyle: any = {
|
|||
|
|
color: `${activeColor}`
|
|||
|
|
};
|
|||
|
|
if (isActiveAnchorSticky) {
|
|||
|
|
wrapperStyle = { height: `${children[index].getExposed().height.value}px` };
|
|||
|
|
anchorStyle = {
|
|||
|
|
position: 'fixed',
|
|||
|
|
top: `${stickyOffsetTop.value}px`,
|
|||
|
|
zIndex: `${zIndex ? zIndex : $u.zIndex.indexListSticky}`,
|
|||
|
|
color: `${activeColor}`
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
broadcast('setActive', active, item.id);
|
|||
|
|
broadcast('setAnchorStyle', anchorStyle, item.id);
|
|||
|
|
broadcast('setWrapperStyle', wrapperStyle, item.id);
|
|||
|
|
} else if (index === active - 1) {
|
|||
|
|
const currentAnchor = children[index];
|
|||
|
|
const currentOffsetTop = currentAnchor.getExposed().top.value;
|
|||
|
|
const targetOffsetTop =
|
|||
|
|
index === children.length - 1 ? top.value : children[index + 1].getExposed().top.value;
|
|||
|
|
const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
|
|||
|
|
const translateY = parentOffsetHeight - currentAnchor.getExposed().height.value;
|
|||
|
|
const anchorStyle = {
|
|||
|
|
position: 'relative',
|
|||
|
|
transform: `translate3d(0, ${translateY}px, 0)`,
|
|||
|
|
zIndex: `${zIndex ? zIndex : $u.zIndex.indexListSticky}`,
|
|||
|
|
color: `${activeColor}`
|
|||
|
|
};
|
|||
|
|
broadcast('setActive', active, currentAnchor.id);
|
|||
|
|
broadcast('setAnchorStyle', anchorStyle, currentAnchor.id);
|
|||
|
|
broadcast('setWrapperStyle', '', item.id);
|
|||
|
|
} else {
|
|||
|
|
broadcast('setActive', false, item.id);
|
|||
|
|
broadcast('setAnchorStyle', '', item.id);
|
|||
|
|
broadcast('setWrapperStyle', '', item.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 侧边栏触摸移动
|
|||
|
|
*/
|
|||
|
|
function onTouchMove(event: TouchEvent) {
|
|||
|
|
touchmove.value = true;
|
|||
|
|
const sidebarLength = children.length;
|
|||
|
|
const touch = event.touches[0];
|
|||
|
|
const itemHeight = sidebar.height / sidebarLength;
|
|||
|
|
let clientY = touch.clientY;
|
|||
|
|
let index = Math.floor((clientY - sidebar.top) / itemHeight);
|
|||
|
|
if (index < 0) {
|
|||
|
|
index = 0;
|
|||
|
|
} else if (index > sidebarLength - 1) {
|
|||
|
|
index = sidebarLength - 1;
|
|||
|
|
}
|
|||
|
|
touchmoveIndex.value = index;
|
|||
|
|
scrollToAnchor(index);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 侧边栏触摸结束
|
|||
|
|
*/
|
|||
|
|
function onTouchStop() {
|
|||
|
|
touchmove.value = false;
|
|||
|
|
scrollToAnchorIndex.value = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 滚动到指定锚点
|
|||
|
|
*/
|
|||
|
|
function scrollToAnchor(index: number) {
|
|||
|
|
if (scrollToAnchorIndex.value === index) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
scrollToAnchorIndex.value = index;
|
|||
|
|
const anchor = children.find(item => item.getExposed().props.index === indexList.value[index]);
|
|||
|
|
if (anchor) {
|
|||
|
|
emit('select', anchor.getExposed().props.index);
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
duration: 0,
|
|||
|
|
scrollTop: anchor.getExposed().top.value + Number(props.scrollTop)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
updateData,
|
|||
|
|
setRect,
|
|||
|
|
onScroll,
|
|||
|
|
children
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-index-bar {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-index-bar__sidebar {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 50%;
|
|||
|
|
right: 0;
|
|||
|
|
@include vue-flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
text-align: center;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
user-select: none;
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-index-bar__index {
|
|||
|
|
font-weight: 500;
|
|||
|
|
padding: 8rpx 18rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-indexed-list-alert {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
right: 90rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -60rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
font-size: 50rpx;
|
|||
|
|
color: var(--u-white-color);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|||
|
|
@include vue-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0;
|
|||
|
|
z-index: 9999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-indexed-list-alert text {
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|