wardrobe/tm-vuetify/components/tm-quickIndex/tm-quickIndex.vue

<template>
	<view class="tm-quickIndex " :style="{
			height: activeHeight_watch + 'px'
		}">
		<view :style="{
			height: activeHeight_watch + 'px'
		}">
			<tm-loadding v-if="loadding" label="处理中..."></tm-loadding>
			<scroll-view scroll-y :class="[black_tmeme?'grey-darken-4':'white']" :style="{
					height: activeHeight_watch + 'px',
				}" @scroll="scrollIn" :scroll-into-view="guid+'_'+(isScroll?'':active_value)">
				<view v-for="(item,index) in dataList" :key="index" :id="guid+'_'+index" class="tm-quickIndex-item">
					
					<view :class="[black_tmeme?'grey-darken-5':'grey-lighten-4 text']" class="  text-size-s text-weight-b px-32 py-12">{{item.title}}</view>
					<view>
						
						<view v-for="(item2,index2) in item.children" :key="index2">
							
							<slot name="cell" :data="{prevent:index,children:index2,total:item.children.length,item:item2,title:item2[rangKey],color:color_tmeme,black:black_tmeme}">
								<view :class="[index2!==item.children.length-1?'border-grey-lighten-4-b-1 ':'',black_tmeme?'bk':'']" class="mx-32 py-24  flex-start" @click="changeIndex(index,index2,item2)">
									<view  v-if="item2['icon']" style="width: 48rpx;height: 48rpx;" class="mr-24 rounded flex-center overflow">
										<tm-icons :size="48" :name="item2['icon']"></tm-icons>
									</view>
									<view class="text-size-n">
										{{item2[rangKey]}}
									</view>
								</view>
								
							</slot>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="tm-quickIndex-index flex-center flex-col pr-16" :style="{
				height: activeHeight_watch + 'px'
			}">
			<view v-if="showtips"
				:class="[`text-${color_tmeme}`,black_tmeme?'bk':'']"
				class="tm-quickIndex-index-Tips absolute rounded shadow-10 flex-center white text-size-g text-weight-b">
				{{ returnIndexStr(scrollIndx) }}
			</view>
			<!-- <view v-if="scrollInBarIndex"
				:class="[`text-${color}`]"
				class="tm-quickIndex-index-Tips absolute rounded shadow-10 flex-center white text-size-g text-weight-b">
				{{returnIndexStr(scrollIndx)}} :class="[scrollIndx==index?`text-${color} text-weight-b`:'']"
			</view> -->
			<view v-if="activeHeight_watch>0" @touchend.stop.prevent="indexMove($event,'end')" @touchmove.stop.prevent="indexMove($event,'scroll')"
				class="tm-quickIndex-index-Bk  round-24  shadow-3 " :class="[black_tmeme?'grey-darken-5 bk':'white']">
				<view @click.stop="acitveItemClick($event,index)"
					class="tm-quickIndex-index-item   text-size-xxs  flex-center  px-2"
					
					v-for="(item,index) in dataList" :key="index">
					{{
						returnIndexStr(index)
					}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	/**
	 * 快速索引
	 * @property {Array} list = [] 默认：[],列表数据，格式：[{title:"汽车品牌",children:[{title:"宝马"},{title:"奔驰"}]}]
	 * @property {String} rang-key = [] 默认：'title',列表对象key，
	 * @property {String | Number} height = [] 默认：0,高度，默认为0时，自动使用屏幕的高度。
	 * @property {Number} value = [] 默认：0,当前滚动的索引位置,推荐使用v-model或者value.sync
	 * @property {String} color = [] 默认：primary,主题色。
	 * @property {Function} change 点击列表项时产生的事件，返回参数：{prent:父Index,children:子index,data:项数据。}
	 * @example <tm-quickIndex :list='[{title:"汽车品牌",children:[{title:"宝马"},{title:"奔驰"}]}]'></tm-quickIndex>
	 * 如果 不提供index索引字符将截取title第一个字符作为索引。如果title第一个没有将使用自建的数字索引。
	 */

	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmLoadding from "@/tm-vuetify/components/tm-loadding/tm-loadding.vue"
	export default {
		components:{tmIcons,tmLoadding},
		name: 'tm-quickIndex',
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			// 高度，默认为0时，自动使用屏幕的高度。
			height: {
				type: String | Number,
				default: 0
			},
			// 当前滚动的位置。
			value: {
				type: Number,
				default: 0
			},
			// 当前滚动的位置。
			color: {
				type: String,
				default: "primary"
			},
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			rangKey: {
				type: String,
				default: "title"
			},
			black: {
				type: String|Boolean,
				default: null
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		watch: {
			value: function() {
				
				this.active = this.value;
				this.isScroll=false;
				this.scrollIndx = this.value;
			},
			list:{
				deep:true,
				handler(){
					this.dataList = this.list;
				}
			}
		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			active: {
				get: function() {
					return this.active_value;
				},
				set: async function(val) {
					this.active_value = val;
					this.$emit('input', val);
					this.$emit('update:value', val);
					let t = this;
					this.showtips = true;
					let idx = 5655555
					clearTimeout(idx)
					idx = setTimeout(function(){
						t.showtips = false;
					},500)
					
				}
			},
			activeHeight_watch: {
				get: function() {
					return this.activeHeight;
				},
				set: function(val) {
					this.activeHeight = val;
				}
			}
		},
		data() {
			return {
				minTop:0,
				activeHeight: 0,
				guid: "",
				active_value: 0,
				listBound: [],
				nowIndex: 0,
				showtips: false,
				isScroll: true,
				quinkBar: null,
				scrollIndx: 0,
				scrollInBarIndex: false,
				dataList:[],
				loadding:true
			};
		},
		async mounted() {
			this.guid = uni.$tm.guid();
			let t = this;
			this.activeHeight_watch = uni.upx2px(this.height);
			this.loadding=true;
			await uni.$tm.sleep(50)
			this.dataList = [...this.list];
			
			this.$nextTick(async function() {
				if (!this.activeHeight_watch) {
					let sysinfo = uni.getSystemInfoSync();
					this.activeHeight_watch = sysinfo.windowHeight;
					
				}
				let df = await this.$Querey(".tm-quickIndex",this).catch(e=>{});
				
				this.minTop = df[0].top;
				let indexbar = await t.$Querey(".tm-quickIndex-index-Bk", t).catch(e => {})
				t.quinkBar = indexbar[0]
				await uni.$tm.sleep(100)
				t.active = t.value;
				uni.createSelectorQuery().in(t).selectAll('.tm-quickIndex-item')
				.boundingClientRect(res => {
					res.forEach(item => {
						t.listBound.push(item.top)
					})
					t.loadding=false;
				}).exec()
			});
		},
		methods: {
			returnIndexStr(index){
				let item = this.list[index];
				if(!item || typeof item === 'undefined') return;
				if(item['index']&& typeof item['index'] !=='undefined'){
					
					return item['index'];
				}else{
					if(item[this.rangKey][0]&& typeof item[this.rangKey][0] !=='undefined'){
						return item[this.rangKey][0];
					}
				}
				return index+1
				
			},
			scrollIn(e) {
				let t = this;
				let y = e.detail.scrollTop;
				this.isScroll = true;

				function chatIndex(min) {
					let index = 0;
					
					for (let i = 0; i < t.listBound.length; i++) {
						if (t.listBound[i] >= min + t.minTop+1) {
							index = i;
							break;
						}
					}
					
					return index;
				}
				
				this.nowIndex = chatIndex(y) - 1;
				
			},
			changeIndex(prentindex, childrenindex, item) {
				this.$emit('change', {
					prent: prentindex,
					children: childrenindex,
					data: item
				})
			},
			async acitveItemClick(e, indx) {
				this.isScroll = false;
				if (this.list.length <= 0) return;
				this.active = indx;
			},
			async indexMove(e, type) {
				let t = this;
				if (this.list.length <= 0) return;
				if (e.changedTouches.length > 1) return;
				let y = e.changedTouches[0].clientY;
				let itemHeight = uni.upx2px(40);
				let ClickTop = e.target.offsetTop;
				let index = 0;
				if (y <= this.quinkBar.top) {
					index = 0;
				} else if (y >= this.quinkBar.bottom) {
					index = this.list.length - 1;
				} else {
					let xy = y - this.quinkBar.top
					index = Math.floor(xy / itemHeight);
				}
				if(index>=this.list.length-1) index = this.list.length-1
				if(index<=0) index = 0;
				this.isScroll = false;
				
				if(this.scrollIndx!==index){
					this.scrollIndx = index
				}
				if(this.active!==index){
					this.active = index;
				}
				if (type == 'end') {
					t.scrollInBarIndex = false;
				} else {
					t.scrollInBarIndex = true;
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tm-quickIndex {
		position: relative;

		.tm-quickIndex-index {
			position: absolute;
			right: 0upx;
			top: 0;
			
			.tm-quickIndex-index-item {
				width: 40rpx;
				height: 40rpx;
				// background: rgba(255,255,255,0.1);
			}

			.tm-quickIndex-index-Tips {
				right: 160rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>