<template> <view> <view class="id"> <view class="left"> <view v-for="(item, index) in list" :key="index" @click="qiehuan(index)" :class="{ box6: ys == index }">{{ item.title }}</view> </view> <view class="rigth"> <!-- :scroll-into-view可以设置让子菜单滚动 --> <scroll-view :scroll-y="true" class="box4" style="height: 200px;" :scroll-into-view="aid" scroll-with-animation @scroll="scroll" @scrolltolower="scrolltolower"> <view v-for="(item, index) in list" :key="index" :id="‘po‘ + index" class="tatle"> {{ item.title }} <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: [‘华为1‘, ‘华为2‘, ‘华为3‘, ‘华为4‘, ‘华为5‘, ‘华为6‘, ‘华为7‘] }, { title: ‘小米‘, list: [‘小米1‘, ‘小米2‘, ‘小米3‘, ‘小米4‘, ‘小米5‘, ‘小米6‘, ‘小米7‘] }, { title: ‘苹果‘, list: [‘苹果1‘, ‘苹果2‘, ‘苹果3‘, ‘苹果4‘, ‘苹果5‘, ‘苹果6‘, ‘苹果7‘] }, { title: ‘魅族‘, list: [‘魅族1‘, ‘魅族2‘, ‘魅族3‘, ‘魅族4‘, ‘魅族5‘, ‘魅族6‘, ‘魅族7‘] }, { title: ‘三星‘, list: [‘三星1‘, ‘三星2‘, ‘三星3‘, ‘三星4‘, ‘三星5‘, ‘三星6‘, ‘三星7‘] } ], aid: ‘‘, ys: ‘‘, topList: [] }; }, onReady() { this.getInfo(); }, methods: { test(e) { // console.log(e.detail.current) }, qiehuan(index) { this.aid = ‘po‘ + index; this.ys = index; }, scroll(e) { // 获取到每次滑动的坐标top let scrollTop = parseInt(e.target.scrollTop); // 循环去判断当前top值处于哪个值 然后左边随着滑动 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.ys = i; } } }, scrolltolower() { setTimeout(() => { this.ys = 4; },80); }, getInfo() { // 下面代码可以获取元素对象 const query = uni.createSelectorQuery().in(this); query.selectAll(‘.tatle‘).boundingClientRect().exec(res => { console.log(res) let nodes = res[0]; let rel = []; nodes.map(item => { rel.push(item.top); }); this.topList = rel; }); } } }; </script> <style lang="scss"> swiper { height: 240px; } .box1 { display: inline-block; width: 200px; height: 100px; background: #007aff; border: 1px solid red; } .box2 { display: inline-block; width: 200px; height: 100px; background: #f0f0f0; border: 1px solid red; } .box3 { display: inline-block; width: 200px; height: 100px; background: #00ff00; border: 1px solid red; } .box5 { text-align: center; width: 100%; height: 100%; } .box4 { white-space: nowrap; } .id { display: flex; .left { width: 100px; border: 1px solid red; } .rigth { flex: 1; } } .box6 { background: #4cd964; } </style>