Web_TracerMethodology/components/index-list/index-list.vue

<template>
	<view class="container">
		<!-- <view class="indexPosition">
			<view class="activeKey" v-for="(item,index) in keyList"  @click="activeKeyHandle(item)">{{item}}
			</view>
		</view> -->
		<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="top" scroll-with-animation="true" @scroll="scroll">
			<view :class="[`box ${item.letter}`]" v-for="item in options">
				<view class="letter">{{item.letter}}</view>
				<view class="listWrap">
					<view class="list" v-for="val in item.data" @click="listClickHandle(val)">
						<view :class="[isSelectAll||checkedListIds.includes(val.id)?'iconWrap':'iconWrap on']">
							<image v-if="isSelectAll||checkedListIds.includes(val.id)" class="checkedIcon"
								src="../../static/check-checkbox.png" mode=""></image>
						</view>
						<text class="mainText">{{val.main}}</text>
						<text class="subText">{{val.sub}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "index-list",
		props: {
			checkedResponsibleList: Array,
			options: Array,
		},
		data() {
			return {
				checkedList: [],
				checkedListIds: [],
				isSelectAll: false,
				keyList: [
					'A', 'B', 'C', 'D'
				],
				top:0
			};
		},
		computed: {

		},
		watch: {
			checkedResponsibleList: function(newVal, oldVal) {
				// console.log({newVal,oldVal});
				if (newVal.length != oldVal.length) {
					this.checkedListIds = JSON.parse(JSON.stringify(newVal)).map(item => item.id);
					this.checkedList = JSON.parse(JSON.stringify(newVal));
					this.$emit("listClick", this.checkedList);
				}

			},
			options:function(){
			    this.checkedList=[];
				this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
				this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
			}
		},
		mounted() {
			this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
			this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
			// console.log(this.checkedListIds);
		},
		methods: {
			scroll(event){
				const {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} = event.detail;
				console.log({scrollTop});
			},
			activeKeyHandle(key) {
				this.getDescBox(`.${key.toLowerCase()}`).then(res=>{
					   console.log({res});
					   console.log(`.${key.toLowerCase()}`);
					   if(!res||res-80<=0||res == this.top-80)return;
					   this.top = res-80;
					   
					   // let timer = setInterval(()=>{
						  //    this.top = this.top + 500;
							 // if(this.top >=res-100 ){
								//  clearInterval(timer);
							 // }
					   // },60);
					   // uni.pageScrollTo({
					   //     duration:500, // 毫秒
					   // 	  scrollTop:100, // 位置
						  //  complete:()=>{
							 //   console.log('done');
						  //  }
					   // });

				});
			},
			// 获取元素距离顶部的高度
			getDescBox(className) {
				let that = this;
				let count = 0;
				return new Promise(resolve => {
					getHeight();

					function getHeight() {
						uni
							.createSelectorQuery()
							.in(that)
							.select(className)
							.boundingClientRect()
							.exec(res => {
								if (res[0]) {
									resolve(res[0].top);
								} else {
									that.$nextTick(() => {
										++count <= 8 ? getHeight() : resolve(null);
									});
								}
							});
					}
				});
			},

			listClickHandle(val) {
				const tempIdsArr = JSON.parse(JSON.stringify(this.checkedListIds));
				const tempArr = JSON.parse(JSON.stringify(this.checkedList));
				const data = JSON.parse(JSON.stringify(val));
				// console.log({tempIdsArr,tempArr});
				// console.log(tempIdsArr.includes(data.id));

				if (tempIdsArr.includes(data.id)) {
					this.isSelectAll = false;
					tempIdsArr.splice(tempIdsArr.indexOf(data.id), 1);
					this.checkedList = tempArr.filter(item => item.id != data.id);
					this.checkedListIds = tempIdsArr;
				} else {
					this.checkedList.push(data);
					this.checkedListIds.push(data.id);
					// console.log(this.checkedListIds);

				}
				this.$emit("listClick", this.checkedList);
			}
		}
	}
</script>

<style lang="less">
	.container {
		position: relative;
		z-index: 1;
		height: 100%;
		overflow: scroll;
		.indexPosition {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 10;
			right: 0;
			width: 50rpx;
			height: 100%;
			background-color: red;

			.activeKey {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				width: 100%;
			}
		}

		.scroll-Y {

			height: 100%;
			.box {
				.letter {
					height: 62.5rpx;
					line-height: 62.5rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666F80;
					padding: 0 25rpx;
				}

				.listWrap {
					background-color: #FFFFFF;

					.list {
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						height: 87.5rpx;
						padding: 0 25rpx;

						.iconWrap {
							width: 25rpx;
							height: 25rpx;
							margin-right: 25rpx;

							.checkedIcon {
								width: 25rpx;
								height: 25rpx;

							}

							&.on {
								border-radius: 50%;
								border: 2.5rpx solid #C3CAD9;
							}
						}

						.mainText {
							display: inline-block;
							font-size: 22.5rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #292C33;
							margin-right: 50rpx;
						}

						.subText {
							font-size: 22.5rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #7A8499;
						}

						&::after {
							position: absolute;
							right: 0;
							bottom: 0;
							display: block;
							content: '';
							width: 90%;
							border-bottom: 1px solid #DADEE6;
						}

						&:last-child {
							&::after {
								display: none;
							}
						}
					}
				}
			}
		}
	}
</style>