这里的业务场景是循环展示的数组上面得通过判断展示上下按钮 主要是通过a=-1,b=-1和index indexm两个下标配合
首先设置的是一个对象
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两个下标配合