uni-app双级联动

客官°小女子只卖身不卖艺 2023-07-13 12:12 23阅读 0赞

双级联动：

<template>
    	<view>
    	
    		<view class="ld">
    			<view class="left">
    				<view v-for="
    				(item,index) in list"
    				 :key="index" 
    				 @click="setId(index)"
    				 :class="{active:index===cu}"
    				 >
    					{
       {item.title}}
    				</view>
    			</view>
    			<view class="right">
    				<scroll-view 
    				scroll-y="true" 
    				style="white-space: nowrap;height:200px;"
    				:scroll-into-view="clickId"
    				scroll-with-animation
    				@scroll="scroll"
    				@scrolltolower="scrolltolower"
    				>
    				
    					<view v-for="(item,index) in list" :key="index">
    						<view class="title" :id="'po'+index">{
       {item.title}}</view>
    						<view v-for="(it,idx) in item.list" :key="idx">
    							{
       {it}}
    						</view>
    					</view>
    				</scroll-view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				list:[
    					{title:"中餐",list:["盖饭","扒饭","咖喱饭","鸡排饭"]},
    					{title:"西餐",list:["牛排","意面","芝士","汉堡"]},
    					{title:"法餐",list:["辣子鸡丁","xxx","肥宅快乐水","yyy"]},
    					{title:"快餐",list:["薯条","饮料","粥","丸子"]}
    				],
    				clickId:"",
    				cu:0,
    				topList:[]
    			}
    		},
    		onReady(){
    			this.getNodeInfo();
    		},
    		methods: {
    			setId(index){
    				this.clickId="po"+index;
    				this.cu=index;
    			},
    			scroll(e){
    				//console.log(e.target.scrollTop);//获取scrollTop
    				let scrollTop=e.target.scrollTop;
    				for(let i=0;i<this.topList.lenght;i++){
    					let h1=this.topList[i];
    					let h2=this.topList[i+1];
    					if(scrollTop>=h1&&scrollTop<h2){
    						this.cu=i;
    					}
    				}
    			},
    			scrolltolower(){
    				setTimeout(()=>{
    					this.cu=3;
    				},80);
    				
    			},
    			getNodeInfo(){
    				// console.log(document)
    				// console.log(window)无document和window对象
    				const query = uni.createSelectorQuery().in(this);
    				query.select('.title').boundingClientRect().exec((res)=>{
    					let nodes=res[0];
    					let rel=[];
    					nodes.map(item=>{
    						rel.push(item.top)
    					})
    					this.topList=rel;
    				});
    				// exec()执行
    			},
    		}
    	}
    </script>
    
    <style lang="scss">
    .box1{
    	width:100px;
    	height:100px;
    	background: red;
    }
    .box2{
    	width:200upx;/* upx会随手机的大小选择合适的宽高 */
    	height: 200upx;
    	background: yellow;
    }
    .title{
    	font-size: 20px;
    	font-weight: bold;
    	background: pink;
    }
    .ld{
    	display: flex;
    	
    	.left{
    		width: 100px;
    		border: 1px solid red;
    	}
    	.right{
    		flex:1;
    		border: 1px solid red;
    	}
    	}
    	.active{
    		background: red;
    	}
    </style>