rongzidanbao-ui/work/pages/business/talbclass.vue

<template>
	<view class="talbbox">
		<!-- 左侧 -->
		<view>
			<scroll-view :scroll-top="scrollTop" class="cate-left" scroll-y="true" show-scrollbar="false">
				<view class="cate-item" :class="{act:current==index}" v-for="(item,index) in cateList"
					@click="menuTab(index)" :key="item.id">
					{{item.label}}
				</view>
			</scroll-view>
		</view>
		<!-- 右侧 -->
		<view class="cate-right">
			<scroll-view :scroll-top="riscrollTop" :scroll-into-view="'cate'+tempCurrent" class="cate-right-scroll" scroll-y="true"
				show-scrollbar="false" @scroll="getCurrentHeight">
				<view :id="'cate'+index" v-for="(item,index) in cateList" :key="item.id" class="cate-right-item">
					<view class="cate-title">{{item.label}}</view>
					<view class="cate-right-txt">
						<text v-for="(el,index) in item.children" @click="getTabFn(el)" :class="{act:ricurrent==el.id}" :key="el.id">{{el.label}}</text>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</view>
		<view class="fwbtns" @click="getSure">确定</view>
	</view>
</template>

<script>
	import {getCategoryTree} from "@/api/common.js"
	export default {
		data() {
			return {
				cateList: [
					{label:'农、林、牧、渔业',id:0,children:[{label:'农业',id:10},{label:'林业',id:11},{label:'畜牧业',id:12},{label:'渔业',id:13},{label:'农、林、牧、渔专业及辅助 性活动',id:14},]},
					{label:'1工业',id:1,children:[{label:'采矿业',id:20},{label:'煤炭开采和洗选业',id:21},{label:'石油和天然气开采业',id:22},{label:'黑色金属矿采选业',id:23},{label:'有色金属矿采选业',id:24},]},
					{label:'2工业',id:1,children:[{label:'采矿业',id:20},{label:'煤炭开采和洗选业',id:21},{label:'石油和天然气开采业',id:22},{label:'黑色金属矿采选业',id:23},{label:'有色金属矿采选业',id:24},]},
					{label:'3工业',id:1,children:[{label:'采矿业',id:20},{label:'煤炭开采和洗选业',id:21},{label:'石油和天然气开采业',id:22},{label:'黑色金属矿采选业',id:23},{label:'有色金属矿采选业',id:24},]},
					{label:'4工业',id:1,children:[{label:'采矿业',id:20},{label:'煤炭开采和洗选业',id:21},{label:'石油和天然气开采业',id:22},{label:'黑色金属矿采选业',id:23},{label:'有色金属矿采选业',id:24},]},
					{label:'5工业',id:1,children:[{label:'采矿业',id:20},{label:'煤炭开采和洗选业',id:21},{label:'石油和天然气开采业',id:22},{label:'黑色金属矿采选业',id:23},{label:'有色金属矿采选业',id:24},]},
					],
				current: 0, //当前点击项
				rectInfoList: [],
				tempCurrent: 0,
				ricurrent:'',
				categoryName:'',//选择的名字
				scrollTop: 0, //左侧导航栏距离顶部的位置
				riscrollTop:0,//右侧导航栏距离顶部的位置
			}
		},
		onLoad(e) {
			if(e.data){
				var newobj=JSON.parse(decodeURIComponent(e.data));
				this.ricurrent=newobj.id;
				this.categoryName=newobj.name
			}
			this.getCasetalbFn()
		},
		mounted() {
			setTimeout(() => {
				this.getRectInfo();
			}, 200)
		},
		methods: {
			getCasetalbFn(){
				getCategoryTree().then(res=>{
					if(res.code==200){
						this.cateList=res.data;
					}
				})
			},
			menuTab(index){
				var top=this.rectInfoList[index].top;
				this.current = index;
				this.riscrollTop = top;
			},
			getTabFn(ite){
				this.ricurrent=ite.id;
				this.categoryName=ite.label
			},
			getSure(){
				// 带数据返回
				var obj={
					categoryName:this.categoryName,
					categoryId:this.ricurrent,
				}
				uni.$emit("refreshtalb",obj)
				uni.navigateBack({
					delta: 1 //返回层数，2则上上页
				});
				
			},
			// 获取与顶部之间的距离
			getRectInfo() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (var i = 0; i < this.cateList.length; i++) {
					let view = uni.createSelectorQuery().in(this).select("#cate" + i);
					view.fields({
						size: true,
						rect: true
					}, data => {
						top = temp;
						bottom = top + data.height;
						temp = bottom;
						this.rectInfoList[i] = {
							'top': top,
							'bottom': bottom
						}
						// console.log(top, bottom);
					}).exec();
				}
			},
			getCurrentHeight(e) {
				var currentHeight = e.detail.scrollTop;
				this.rectInfoList.forEach((item, index) => {
					if (currentHeight >= item.top && currentHeight <= item.bottom) {
						// 当前获取的盒子高度大于top小于bottom，判定将索引传至左侧菜单导航
						this.current = index;
						this.scrollTop = index * uni.upx2px(100);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
/deep/::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
.talbbox{
	display: flex;height: 100vh;padding-bottom: 98rpx;
	.cate-left{width: 330rpx;flex: 0 0 auto;height: 100%;background-color: #f5f5f5;
		.cate-item{min-height: 110rpx;font-weight: 500;display: flex;align-items: center;justify-content: center;
font-size: 28rpx;color: #666666;padding: 20rpx 46rpx;
			&.act{background-color: #ffffff;font-weight: bold;color: $com-cd3;}
		}
	}
	.cate-right{flex: 1;height: 100%;background: #ffffff;
		.cate-right-scroll{height: 100%;padding-left:58rpx;padding-right: 52rpx;
			.cate-right-item{
				.cate-title{font-weight: bold;font-size: 30rpx;color: #222327;min-height: 110rpx;display: flex;align-items: center;padding: 20rpx 0;}
				.cate-right-txt{display: flex;flex-wrap: wrap;
					text{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;padding: 8rpx 0;width: 100%;box-sizing: border-box;display: block;
						&.act{color: $com-cd3;}
					}
				}
			}
		
		}
	}
}
</style>