zheng_xie_ui/work/pages/case/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 {getCasetalbFn} from "@/api/mine/case.js"
	export default {
		data() {
			return {
				cateList: [],
				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(){
				getCasetalbFn().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: 252rpx;flex: 0 0 auto;height: 100%;background-color: #f5f5f5;
		.cate-item{height: 110rpx;line-height: 110rpx;text-align: center;font-weight: 500;
font-size: 28rpx;color: #666666;
			&.act{background-color: #ffffff;font-weight: bold;color: #1D64E2;}
		}
	}
	.cate-right{flex: 1;height: 100%;background: #ffffff;
		.cate-right-scroll{height: 100%;padding-left:34rpx;
			.cate-right-item{
				.cate-title{font-weight: bold;font-size: 30rpx;color: #222327;height: 110rpx;line-height: 110rpx;}
				.cate-right-txt{display: flex;flex-wrap: wrap;
					text{font-weight: 500;font-size: 26rpx;color: #666666;min-width: 130rpx;margin-right:24rpx ;margin-bottom: 16rpx;padding: 8rpx 0;
						&.act{color: #1D64E2;}
					}
				}
			}
		
		}
	}
}
</style>