- 技术博客
- uniapp 联动侧边栏导航分类(解决滚动到最后选项左侧不会选中)非插件市场下载
<template
>
<view
>
<view
class="ld">
<view
class="left">
<scroll
-view
:scroll
-y
="true" :scroll
-with-animation
="true" :scroll
-into
-view
="clickToId" :style
="{ height: windowHeight }">
<view v
-for="(item, index) in list" :key
="index">
<view
:class="['title', { active: index === currentNum }]" :id
="'to' + index" @click
="setId(index)">{{ item
.title
}}</view
>
</view
>
</scroll
-view
>
</view
>
<view
class="right">
<scroll
-view
:scroll
-into
-view
="clickId" @scroll
="scroll" :scroll
-with-animation
="true" :scroll
-y
="true" :style
="{ height: windowHeight }">
<view v
-for="(item, index) in list" :key
="index">
<view
class="title,right_title" :id
="'po' + index">{{ item
.title
}}</view
>
<view v
-for="(it, idx) in item.list" :key
="idx">
<text
class="item">{{ it
}}</text
>
</view
>
</view
>
</scroll
-view
>
</view
>
</view
>
</view
>
</template
>
<script
>
export default {
data() {
return {
list
: [
{
title
: '菜单1',
list
: ['盖饭1', '大白菜1', '土豆1', '西红柿1', '辣椒1']
},
{
title
: '菜单2',
list
: ['盖饭2', '大白菜2', '土豆2', '西红柿2', '辣椒2']
},
{
title
: '菜单3',
list
: ['盖饭3', '大白菜3', '土豆3', '西红柿3', '辣椒3']
},
{
title
: '菜单4',
list
: ['盖饭4', '大白菜4', '土豆4', '西红柿4', '辣椒4']
},
{
title
: '菜单5',
list
: ['盖饭5', '大白菜5', '土豆5', '西红柿5', '辣椒5']
},
{
title
: '菜单6',
list
: ['盖饭6', '大白菜6', '土豆6', '西红柿6', '辣椒6']
},
{
title
: '菜单7',
list
: ['盖饭7', '大白菜7', '土豆7', '西红柿7', '辣椒7']
},
{
title
: '菜单8',
list
: ['盖饭8', '大白菜8', '土豆8', '西红柿8', '辣椒8']
},
{
title
: '菜单9',
list
: ['盖饭9', '大白菜9', '土豆9', '西红柿9', '辣椒9']
},
{
title
: '菜单10',
list
: ['盖饭10', '大白菜10', '土豆10', '西红柿10', '辣椒10']
},
{
title
: '菜单11',
list
: ['盖饭11', '大白菜11', '土豆11', '西红柿11', '辣椒11']
},
{
title
: '菜单12',
list
: ['盖饭12', '大白菜12', '土豆12', '西红柿12', '辣椒12']
},
{
title
: '菜单13',
list
: ['盖饭13', '大白菜13', '土豆13', '西红柿13', '辣椒13']
}
],
windowHeight
: '0px',
clickId
: '',
clickToId
: '',
currentNum
: 0,
topList
: [],
isLeftClick
: false
};
},
methods
: {
setId(index
) {
this.clickId
= 'po' + index
;
this.isLeftClick
= true;
this.currentNum
= index
;
},
scroll(e
) {
if (this.isLeftClick
) {
this.isLeftClick
= false;
return;
}
let scrollTop
= e
.target
.scrollTop
;
for (let i
= 0; i
< this.topList
.length
; i
++) {
let h1
= this.topList
[i
];
let h2
= this.topList
[i
+ 1];
if (scrollTop
>= h1
&& scrollTop
< h2
) {
this.currentNum
= i
;
this.clickToId
= 'to' + i
;
}
let length
= this.topList
.length
;
if (scrollTop
>= this.topList
[length
- 1]) {
this.currentNum
= length
- 1;
this.clickToId
= 'to' + length
- 1;
}
}
},
getNodesInfo() {
const query
= uni
.createSelectorQuery().in(this);
query
.selectAll('.right_title')
.boundingClientRect()
.exec(res
=> {
console
.log(res
);
let nodes
= res
[0];
let rel
= [];
nodes
.map(item
=> {
rel
.push(item
.top
);
});
console
.log(rel
);
this.topList
= rel
;
});
}
},
onLoad() {
let _that
= this;
uni
.getSystemInfo({
success
: function(res
) {
_that
.windowHeight
= res
.windowHeight
+ 'px';
}
});
this.getNodesInfo();
}
};
</script
>
<style lang
="less">
.ld
{
display
: flex
;
.left
{
width
: 160upx
;
border
-right
: 1upx solid red
;
.title
{
text
-align
: center
;
height
: 100upx
;
line
-height
: 100upx
;
color
: #
000000;
}
.active
{
background
-color
: #dd524d
;
color
: #ffffff
;
}
}
.right
{
flex
: 1;
.title
{
color
: #dd524d
;
padding
: 20upx
;
font
-weight
: 700;
}
.item
{
padding
-left
: 20upx
;
display
: inline
-block
;
height
: 350upx
;
}
}
}
</style
>
效果图
