property/user_ui/work/pages/clean/index.vue

<template>
	<view class="clear">
		<view class="cleartop mb24">
			<view class="search flexc">
				<image :src="search"></image>
				<!-- confirm-type="search" @confirm="getConfirm" -->
				<input placeholder="深度清洁"  v-model="text"/>
				<view class="btn" @click="getConfirm">搜索</view>
			</view>
		</view>
		
		<view class="talbbox">
			<!-- 左侧 -->
			<view class="tableft">
				<view class="flexcc">
					<view class="catetit">热门服务</view>
				</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-list flexcw">
							<view class="list flexccc" v-for="(el,index) in item.children" @click="getTabFn(el)" :class="{act:ricurrent==el.id}" :key="el.id">
								<image :src="cbga"></image>
								<view class="over">保洁初体验</view>
							</view>
						</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>
	</view>
	
</template>

<script>
	// import {getCategoryTree} from "@/api/common.js"
	export default {
		data() {
			return {
				search:require('@/work/static/clear/search.png'),
				cbga:require('@/static/images/home/adrbg.png'),
				text:'',
				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,//右侧导航栏距离顶部的位置
				tabflag:false,
			}
		},
		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: {
			getConfirm(){
				
			},
			getCasetalbFn(){
				getCategoryTree().then(res=>{
					if(res.code==200){
						this.cateList=res.data;
					}
				})
			},
			menuTab(index){
				var that=this;
				var idx=Number(index)
				var top=this.rectInfoList[idx].top;
				this.current = idx;
				this.riscrollTop = top;
				this.tabflag=true;
				setTimeout(function(){
					that.tabflag=false;
				},500)
			},
			getTabFn(ite){
				this.$tab.navigateTo("/work/pages/clean/detail")
				// 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 that=this;
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (var i = 0; i < this.cateList.length; i++) {
					var obj={}
					let view = uni.createSelectorQuery().in(this).select("#cate" + i);
					view.fields({
						size: true,
						rect: true
					}, data => {
						top = temp;
						bottom = top + data.height;
						temp = bottom;
						var obj={
							'top': Number(top),
							'bottom': Number(bottom)
						}
						that.rectInfoList.push(obj)
						// console.log(top, bottom);
					}).exec();
				}
			},
			getCurrentHeight(e) {
				var currentHeight = e.detail.scrollTop;
				this.rectInfoList.forEach((item, index) => {
					if (currentHeight >= item.top && currentHeight <= item.bottom&&!this.tabflag) {
						// 当前获取的盒子高度大于top小于bottom，判定将索引传至左侧菜单导航
						this.current = Number(index);
						this.scrollTop = Number(index) * uni.upx2px(100);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
/deep/::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
.talbbox{flex: 1;display: flex;overflow: hidden;
	.tableft{width: 236rpx;box-shadow: 0px 8rpx 10rpx 0px #8E8E8E;display: flex;flex-direction: column;
}
	.catetit{font-weight: bold;font-size: 32rpx;color: #272727;position: relative;flex: 0 0 auto;
		&::before{content: '';position: absolute;left: 0;right: 0;bottom: 0;z-index: -1;height: 20rpx;background: linear-gradient(263deg, #5CCCFF, #5CEEB8);}
	}
	.cate-left{width: 236rpx;flex:1;overflow: auto;
		.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{font-weight: bold;color: #272727;}
		}
	}
	.cate-right{flex: 1;height: 100%;
		.cate-right-scroll{height: 100%;padding-left:18rpx;padding-right: 2rpx;
			.cate-right-item{padding-bottom: 32rpx;
				.cate-title{font-weight: bold;font-size: 30rpx;color: #222327;display: flex;align-items: center;padding:4rpx 0 4rpx 30rpx;margin-bottom: 20rpx;}
				.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;}
					// }
				}
			}
		
		}
	}
}
.clear{height: 100vh;display: flex;flex-direction: column;
	.cleartop{padding: 16rpx 30rpx;flex: 0 0 auto;background: #ffffff;
		.search{flex: 1;margin-left: 16rpx;height: 64rpx;background: #EEEEEE;border-radius: 32rpx;border: 2rpx solid #E6E6E6;padding-left: 24rpx;box-sizing: border-box;
		image{width: 32rpx;height: 34rpx;margin-right: 22rpx;flex: 0 0 auto;}
		input{flex: 1;font-size: 26rpx;color: #272727;}
		.btn{width: 100rpx;height: 64rpx;background: #3565ED;border-radius: 32rpx;flex: 0 0 auto;font-weight: bold;text-align: center;line-height: 64rpx;font-size: 26rpx;color: #FFFFFF;}
		}
	}
	.cate-list{
		.list{margin: 0 15rpx;padding: 16rpx 0;
			image{width: 210rpx;height: 148rpx;margin-bottom: 16rpx;}
			view{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
}
</style>