uniapp 联动侧边栏导航分类(解决滚动到最后选项左侧不会选中)非插件市场下载

淩亂°似流年 2022-12-03 09:52 57阅读 0赞

<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() {
        
    		//获取节点为.right_title距离顶部的距离，返回值放在数组中
    			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>

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3afb4fbcbc8a4720a2ed52ce33ff0f7a.png