关于数组循环展示的列表中间的排他高亮问题

78 阅读1分钟

这里的业务场景是循环展示的数组上面得通过判断展示上下按钮 主要是通过a=-1,b=-1和index indexm两个下标配合

image.png

image.png 首先设置的是一个对象

showList: {
	   a:-1,
	   b:-1
	  } as any,

通过图片点击方法

<img 
						v-if="dataItem.childList != undefined&&dataItem.childList.length > 0&&isShow(index,indexm)" 
						class="btn-icon" 
						src="../../assets/img/btn_up.png"
						@click="btnAction(1)"
					/>
					<img 
						v-if="dataItem.childList != undefined&&dataItem.childList.length >0&&!isShow(index,indexm)" 
						class="btn-icon" 
						src="../../assets/img/btn_down.png"
						@click="btnAction(0,index,indexm)"
					/>

两个方法

const isShow = (a: number,b: number) => {
			let bo = state.showList.a == a&&state.showList.b == b;
			return bo;
		};
                
const btnAction = (type: number,a:number = -1,b:number = -1) => {
			let dom:any;
			switch(type){
				// 选中展开
				case 0: state.showList.a = a;
								state.showList.b = b;
								dom = document.getElementById(a+'_'+b) as HTMLElement;
								console.log(dom);
								
								let n = 0;
								props.data.forEach((item: any,index: number) => {
									if(index<a){
										n += item.dataList.length;
									}
								});
								let main = document.getElementById('main') as HTMLElement;
								setTimeout(()=>{
									if(state.bo){
										main.scrollTop = (a+1)*(108 + 16)+a*16+(n+b)*(100)+state.height+34;
									}else{
										main.scrollTop = (a+1)*(108 + 16)+a*16+(n+b)*(100);
									}
									state.height = dom.offsetHeight;
								})
								break;
				default: state.showList.a = a;state.showList.b = b;state.height = 0;break;
			}
		}

主要是通过a=-1,b=-1和index indexm两个下标配合