uni-events-helper-wx/uview-ui/components/u-index-list/u-index-list.vue

<template>
	<view class="u-index-list">
		<!-- #ifdef APP-NVUE -->
		<list
			:scrollTop="scrollTop"
			enable-back-to-top
			:offset-accuracy="1"
			:style="{
				height: $u.addUnit(scrollViewHeight)
			}"
			@scroll="scrollHandler"
			ref="uList"
		>
			<cell
				v-if="$slots.header"
				ref="header"
			>
				<slot name="header" />
			</cell>
			<slot />
			<cell v-if="$slots.header">
				<slot name="footer" />
			</cell>
		</list>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<scroll-view
			:scrollTop="scrollTop"
			:scrollIntoView="scrollIntoView"
			:offset-accuracy="1"
			:style="{
				height: $u.addUnit(scrollViewHeight)
			}"
			scroll-y
			@scroll="scrollHandler"
			ref="uList"
		>
			<view v-if="$slots.header">
				<slot name="header" />
			</view>
			<slot />
			<view v-if="$slots.header">
				<slot name="footer" />
			</view>
		</scroll-view>
		<!-- #endif -->
		<view
			class="u-index-list__letter"
			ref="u-index-list__letter"
			:style="{ top: $u.addUnit(letterInfo.top || 100) }"
			@touchstart="touchStart"
			@touchmove.stop.prevent="touchMove"
			@touchend.stop.prevent="touchEnd"
			@touchcancel.stop.prevent="touchEnd"
		>
			<view
				class="u-index-list__letter__item"
				v-for="(item, index) in uIndexList"
				:key="index"
				:style="{
					backgroundColor: activeIndex === index ? activeColor : 'transparent'
				}"
			>
				<text
					class="u-index-list__letter__item__index"
					:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
				>{{ item }}</text>
			</view>
		</view>
		<u-transition
			mode="fade"
			:show="touching"
			:customStyle="{
				position: 'fixed',
				right: '50px',
				top: $u.addUnit(indicatorTop),
				zIndex: 2
			}"
		>
			<view
				class="u-index-list__indicator"
				:class="['u-index-list__indicator--show']"
				:style="{
					height: $u.addUnit(indicatorHeight),
					width: $u.addUnit(indicatorHeight)
				}"
			>
				<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
			</view>
		</u-transition>
	</view>
</template>

<script>
	const indexList = () => {
		const indexList = [];
		const charCodeOfA = 'A'.charCodeAt(0);
		for (let i = 0; i < 26; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i));
		}
		return indexList;
	}
	import props from './props.js';
	// #ifdef APP-NVUE
	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
	const dom = uni.requireNativePlugin('dom')
	// #endif
	/**
	 * IndexList 索引列表
	 * @description  通过折叠面板收纳内容区域
	 * @tutorial https://uviewui.com/components/indexList.html
	 * @property {String}			inactiveColor	右边锚点非激活的颜色 ( 默认 '#606266' )
	 * @property {String}			activeColor		右边锚点激活的颜色 ( 默认 '#5677fc' )
	 * @property {Array}			indexList		索引字符列表，数组形式
	 * @property {Boolean}			sticky			是否开启锚点自动吸顶 ( 默认 true )
	 * @property {String | Number}	customNavHeight	自定义导航栏的高度 ( 默认 0 )
	 * */ 
	export default {
		name: 'u-index-list',
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
		options: {
			virtualHost: true
		},
		// #endif
		data() {
			return {
				// 当前正在被选中的字母索引
				activeIndex: -1,
				touchmoveIndex: 1,
				// 索引字母的信息
				letterInfo: {
					height: 0,
					itemHeight: 0,
					top: 0
				},
				// 设置字母指示器的高度，后面为了让指示器跟随字母，并将尖角部分指向字母的中部，需要依赖此值
				indicatorHeight: 50,
				// 字母放大指示器的top值，为了让其指向当前激活的字母
				// indicatorTop: 0
				// 当前是否正在被触摸状态
				touching: false,
				// 滚动条顶部top值
				scrollTop: 0,
				// scroll-view的高度
				scrollViewHeight: 0,
				// 系统信息
				sys: uni.$u.sys(),
				scrolling: false,
				scrollIntoView: '',
			}
		},
		computed: {
			// 如果有传入外部的indexList锚点数组则使用，否则使用内部生成A-Z字母
			uIndexList() {
				return this.indexList.length ? this.indexList : indexList()
			},
			// 字母放大指示器的top值，为了让其指向当前激活的字母
			indicatorTop() {
				const {
					top,
					itemHeight
				} = this.letterInfo
				return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2)
			}
		},
		watch: {
			// 监听字母索引的变化，重新设置尺寸
			uIndexList: {
				immediate: true,
				handler() {
					uni.$u.sleep().then(() => {
						this.setIndexListLetterInfo()
					})
				}
			}
		},
		created() {
			this.children = []
			this.anchors = []
			this.init()
		},
		mounted() {
			this.setIndexListLetterInfo()
		},
		methods: {
			init() {
				// 设置列表的高度为整个屏幕的高度
				this.scrollViewHeight = this.sys.windowHeight
			},
			// 索引列表被触摸
			touchStart(e) {
				// 获取触摸点信息
				const touchStart = e.changedTouches[0]
				if (!touchStart) return
				this.touching = true
				const {
					pageY
				} = touchStart
				// 根据当前触摸点的坐标，获取当前触摸的为第几个字母
				const currentIndex = this.getIndexListLetter(pageY)
				this.setValueForTouch(currentIndex)
			},
			// 索引字母列表被触摸滑动中
			touchMove(e) {
				// 获取触摸点信息
				let touchMove = e.changedTouches[0]
				if (!touchMove) return;

				// 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
				if (!this.touching) {
					this.touching = true
				}
				const {
					pageY
				} = touchMove
				const currentIndex = this.getIndexListLetter(pageY)
				this.setValueForTouch(currentIndex)
			},
			// 触摸结束
			touchEnd(e) {
				// 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换u-transition的show带来的影响
				uni.$u.sleep(300).then(() => {
					this.touching = false
				})
			},
			// 获取索引列表的尺寸以及单个字符的尺寸信息
			getIndexListLetterRect() {
				return new Promise(resolve => {
					// 延时一定时间，以获取dom尺寸
					// #ifndef APP-NVUE
					this.$uGetRect('.u-index-list__letter').then(size => {
						resolve(size)
					})
					// #endif

					// #ifdef APP-NVUE
					const ref = this.$refs['u-index-list__letter']
					dom.getComponentRect(ref, res => {
						resolve(res.size)
					})
					// #endif
				})
			},
			// 设置indexList索引的尺寸信息
			setIndexListLetterInfo() {
				this.getIndexListLetterRect().then(size => {
					const {
						height
					} = size
					const sys = uni.$u.sys()
					const windowHeight = sys.windowHeight
					let customNavHeight = 0
					// 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
					if (this.customNavHeight == 0) {
						// #ifdef H5
						customNavHeight = sys.windowTop
						// #endif
						// #ifndef H5
						// 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
						customNavHeight = -(sys.statusBarHeight + 44)
						// #endif
					} else {
						customNavHeight = uni.$u.getPx(this.customNavHeight)
					}
					this.letterInfo = {
						height,
						// 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
						top: (windowHeight - height) / 2 + customNavHeight / 2,
						itemHeight: Math.floor(height / this.uIndexList.length)
					}
				})
			},
			// 获取当前被触摸的索引字母
			getIndexListLetter(pageY) {
				const {
					top,
					height,
					itemHeight
				} = this.letterInfo
				// 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
				// #ifdef H5
				pageY += uni.$u.sys().windowTop
				// #endif
				// 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
				if (pageY < top) {
					return 0
				} else if (pageY >= top + height) {
					// 如果超出了，取最后一个字母
					return this.uIndexList.length - 1
				} else {
					// 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
					return Math.floor((pageY - top) / itemHeight);
				}
			},
			// 设置各项由触摸而导致变化的值
			setValueForTouch(currentIndex) {
				// 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
				if (currentIndex === this.activeIndex) return
				this.activeIndex = currentIndex
				// #ifndef APP-NVUE || MP-WEIXIN
				// 在非nvue中，由于anchor和item都在u-index-item中，所以需要对index-item进行偏移
				this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex]}`
				// #endif
				// #ifdef MP-WEIXIN
				// 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
				this.scrollTop = this.children[currentIndex].top
				// #endif
				// #ifdef APP-NVUE
				// 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
				const anchor = `u-index-anchor-${this.uIndexList[currentIndex]}`
				dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
					offset: 0,
					animated: false
				})
				// #endif
			},
			getHeaderRect() {
				// 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
				return new Promise(resolve => {
					dom.getComponentRect(this.$refs.header, res => {
						resolve(res.size)
					})
				})
			},
			// scroll-view的滚动事件
			async scrollHandler(e) {
				if (this.touching || this.scrolling) return
				// 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
				this.scrolling = true
				uni.$u.sleep(10).then(() => {
					this.scrolling = false
				})
				let scrollTop = 0
				const len = this.children.length
				let children = this.children
				const anchors = this.anchors
				// #ifdef APP-NVUE
				// nvue下获取的滚动条偏移为负数，需要转为正数
				scrollTop = Math.abs(e.contentOffset.y)
				// 获取header slot的尺寸信息
				const header = await this.getHeaderRect()
				// item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
				let top = header.height
				// 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
				children = this.children.map((item, index) => {
					const child = {
						height: item.height,
						top
					}
					// 进行累加，给下一个item提供计算依据
					top += item.height + anchors[index].height
					return child
				})
				// #endif
				// #ifndef APP-NVUE
				// 非nvue通过detail获取滚动条位移
				scrollTop = e.detail.scrollTop
				// #endif
				for (let i = 0; i < len; i++) {
					const item = children[i],
						nextItem = children[i + 1]
					// 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
					if (scrollTop <= children[0].top || scrollTop >= children[len - 1].top + children[len -
							1].height) {
						this.activeIndex = -1
						break
					} else if (!nextItem) { 
						// 当不存在下一个item时，意味着历遍到了最后一个
						this.activeIndex = len - 1
						break
					} else if (scrollTop > item.top && scrollTop < nextItem.top) {
						this.activeIndex = i
						break
					}
				}
			},
		},
	}
</script>

<style lang="scss">
	@import "../../libs/css/components.scss";

	.u-index-list {

		&__letter {
			position: fixed;
			right: 0;
			text-align: center;
			z-index: 3;
			padding: 0 6px;

			&__item {
				width: 16px;
				height: 16px;
				border-radius: 100px;
				margin: 1px 0;
				@include flex;
				align-items: center;
				justify-content: center;

				&--active {
					background-color: $u-primary;
				}

				&__index {
					font-size: 12px;
					text-align: center;
					line-height: 12px;
				}
			}
		}

		&__indicator {
			width: 50px;
			height: 50px;
			border-radius: 100px 100px 0 100px;
			text-align: center;
			color: #ffffff;
			background-color: #c9c9c9;
			transform: rotate(-45deg);
			@include flex;
			justify-content: center;
			align-items: center;

			&__text {
				font-size: 28px;
				line-height: 28px;
				font-weight: bold;
				color: #fff;
				transform: rotate(45deg);
				text-align: center;
			}
		}
	}
</style>