From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-index-list/u-index-list.vue | 315 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 315 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-index-list/u-index-list.vue b/uview-ui/components/u-index-list/u-index-list.vue
new file mode 100644
index 0000000..37a9763
--- /dev/null
+++ b/uview-ui/components/u-index-list/u-index-list.vue
@@ -0,0 +1,315 @@
+<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: 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>
+ var indexList = function() {
+ var indexList = [];
+ var charCodeOfA = 'A'.charCodeAt(0);
+ for (var i = 0; i < 26; i++) {
+ indexList.push(String.fromCharCode(charCodeOfA + i));
+ }
+ return indexList;
+ };
+
+ /**
+ * indexList 绱㈠紩鍒楄〃
+ * @description 閫氳繃鎶樺彔闈㈡澘鏀剁撼鍐呭鍖哄煙,鎼厤<u-index-anchor>浣跨敤
+ * @tutorial https://www.uviewui.com/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 閿氱偣鍜屽彸杈圭储寮曞瓧绗﹂珮浜鑹诧紙榛樿#497bff锛�
+ * @event {Function} select 閫変腑鍙宠竟绱㈠紩瀛楃鏃惰Е鍙�
+ * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
+ */
+ export default {
+ name: "u-index-list",
+ props: {
+ sticky: {
+ type: Boolean,
+ default: true
+ },
+ zIndex: {
+ type: [Number, String],
+ default: ''
+ },
+ scrollTop: {
+ type: [Number, String],
+ default: 0,
+ },
+ offsetTop: {
+ type: [Number, String],
+ default: 0
+ },
+ indexList: {
+ type: Array,
+ default () {
+ return indexList()
+ }
+ },
+ activeColor: {
+ type: String,
+ default: '#497bff'
+ }
+ },
+ created() {
+ // #ifdef H5
+ this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
+ // #endif
+ // #ifndef H5
+ this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
+ // #endif
+ // 鍙兘鍦╟reated鐢熷懡鍛ㄦ湡瀹氫箟children锛屽鏋滃湪data瀹氫箟锛屼細鍥犱负寰幆寮曠敤鑰屾姤閿�
+ this.children = [];
+ },
+ data() {
+ return {
+ activeAnchorIndex: 0,
+ showSidebar: true,
+ // children: [],
+ touchmove: false,
+ touchmoveIndex: 0,
+ }
+ },
+ watch: {
+ scrollTop() {
+ this.updateData()
+ }
+ },
+ computed: {
+ // 寮瑰嚭toast鐨剒-index鍊�
+ alertZIndex() {
+ return this.$u.zIndex.toast;
+ }
+ },
+ methods: {
+ updateData() {
+ this.timer && clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.showSidebar = !!this.children.length;
+ this.setRect().then(() => {
+ this.onScroll();
+ });
+ }, 0);
+ },
+ setRect() {
+ return Promise.all([
+ this.setAnchorsRect(),
+ this.setListRect(),
+ this.setSiderbarRect()
+ ]);
+ },
+ setAnchorsRect() {
+ return Promise.all(this.children.map((anchor, index) => anchor
+ .$uGetRect('.u-index-anchor-wrapper')
+ .then((rect) => {
+ Object.assign(anchor, {
+ height: rect.height,
+ top: rect.top
+ });
+ })));
+ },
+ setListRect() {
+ return this.$uGetRect('.u-index-bar').then((rect) => {
+ Object.assign(this, {
+ height: rect.height,
+ top: rect.top + this.scrollTop
+ });
+ });
+ },
+ setSiderbarRect() {
+ return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
+ this.sidebar = {
+ height: rect.height,
+ top: rect.top
+ };
+ });
+ },
+ getActiveAnchorIndex() {
+ const {
+ children
+ } = this;
+ const {
+ sticky
+ } = this;
+ for (let i = this.children.length - 1; i >= 0; i--) {
+ const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+ const reachTop = sticky ? preAnchorHeight : 0;
+ if (reachTop >= children[i].top) {
+ return i;
+ }
+ }
+ return -1;
+ },
+ onScroll() {
+ const {
+ children = []
+ } = this;
+ if (!children.length) {
+ return;
+ }
+ const {
+ sticky,
+ stickyOffsetTop,
+ zIndex,
+ scrollTop,
+ activeColor
+ } = this;
+ const active = this.getActiveAnchorIndex();
+ this.activeAnchorIndex = active;
+ if (sticky) {
+ let isActiveAnchorSticky = false;
+ if (active !== -1) {
+ isActiveAnchorSticky =
+ children[active].top <= 0;
+ }
+ children.forEach((item, index) => {
+ if (index === active) {
+ let wrapperStyle = '';
+ let anchorStyle = {
+ color: `${activeColor}`
+ };
+ if (isActiveAnchorSticky) {
+ wrapperStyle = {
+ height: `${children[index].height}px`
+ };
+ anchorStyle = {
+ position: 'fixed',
+ top: `${stickyOffsetTop}px`,
+ zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+ color: `${activeColor}`
+ };
+ }
+ item.active = active;
+ item.wrapperStyle = wrapperStyle;
+ item.anchorStyle = anchorStyle;
+ } else if (index === active - 1) {
+ const currentAnchor = children[index];
+ const currentOffsetTop = currentAnchor.top;
+ const targetOffsetTop = index === children.length - 1 ?
+ this.top :
+ children[index + 1].top;
+ const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+ const translateY = parentOffsetHeight - currentAnchor.height;
+ const anchorStyle = {
+ position: 'relative',
+ transform: `translate3d(0, ${translateY}px, 0)`,
+ zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+ color: `${activeColor}`
+ };
+ item.active = active;
+ item.anchorStyle = anchorStyle;
+ } else {
+ item.active = false;
+ item.anchorStyle = '';
+ item.wrapperStyle = '';
+ }
+ });
+ }
+ },
+ onTouchMove(event) {
+ this.touchmove = true;
+ const sidebarLength = this.children.length;
+ const touch = event.touches[0];
+ const itemHeight = this.sidebar.height / sidebarLength;
+ let clientY = 0;
+ clientY = touch.clientY;
+ let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
+ if (index < 0) {
+ index = 0;
+ } else if (index > sidebarLength - 1) {
+ index = sidebarLength - 1;
+ }
+ this.touchmoveIndex = index;
+ this.scrollToAnchor(index);
+ },
+ onTouchStop() {
+ this.touchmove = false;
+ this.scrollToAnchorIndex = null;
+ },
+ scrollToAnchor(index) {
+ if (this.scrollToAnchorIndex === index) {
+ return;
+ }
+ this.scrollToAnchorIndex = index;
+ const anchor = this.children.find((item) => item.index === this.indexList[index]);
+ if (anchor) {
+ this.$emit('select', anchor.index);
+ uni.pageScrollTo({
+ duration: 0,
+ scrollTop: anchor.top + this.scrollTop
+ });
+ }
+ }
+ }
+ };
+</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: #fff;
+ 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>
--
Gitblit v1.9.3