uni-tpl/uview-ui/components/u-index-list/u-index-list.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: 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 锚点和右边索引字符高亮颜色（默认#2979ff）
	 * @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: '#2979ff'
			}
		},
		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
			// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错
			this.children = [];
		},
		data() {
			return {
				activeAnchorIndex: 0,
				showSidebar: true,
				// children: [],
				touchmove: false,
				touchmoveIndex: 0,
			}
		},
		watch: {
			scrollTop() {
				this.updateData()
			}
		},
		computed: {
			// 弹出toast的z-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>