<template>
<view class="content">
<view class="ld">
<!-- :class="{active:index===change}" -->
<view class="left">
<view
v-for="(item,index) in kindlist"
:key="index" @click="setid(index)"
:class="index===change?'active':''"
>
{{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="true"
@scroll="scroll"
@scrolltolower="scrolltolower "
>
<view v-for="(item,index) in kindlist" :key="index">
<text class="title" :id="'po'+index">{{item.title}}</text>
<view v-for="(item2,index2) in item.list" :key="index2">
{{item2}}
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
kindlist: [{
title: "水果",
list: ["苹果", "香蕉", "桔子", "芒果"]
},
{
title: "家电",
list: ["电视", "冰箱", "空调", "热水器"]
},
{
title: "美食",
list: ["牛排", "汉堡", "芝士", "意面"]
},
{
title: "衣物",
list: ["T 恤", "卫衣", "短裤", "帽子"]
}
],
clickId: "",
change:0,
topList:[],
isLeftClick:false
}
},
onReady() {
this.getNodesInfo();
},
methods: {
setid(i) {
this.clickId = "po" + i;
this.change = i;
this.isLeftClick=true;
},
scroll(e){
if(this.isLeftClick){
this.isLeftClick=false;
return;
}
let scrollTop = e.target.scrollTop;
// 只能变前第三个,最后一个到不了底部,只能用滚动到底部事件
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.change = i;
}
}
},
// 滚动到底部
scrolltolower(){
setTimeout(()=>{
this.change = 3;
},80)
},
getNodesInfo(){
//小程序没有doucument和window对象(undefined)
const query =uni.createSelectorQuery().in(this);
query.selectAll(".title").boundingClientRect().exec(res=>{
let nodes = res[0];
let arr = [];
nodes.map(item=>{
arr.push(item.top);
})
this.topList = arr;
})
}
}
}
</script>
<style lang="scss">
.ld {
display: flex;
border: 1px solid black;
.left {
width: 100px;
text-align: center;
border-right: 1px dashed #007AFF;
}
.right {
flex: 1;
padding-left: 10px;
}
}
.title {
font-size: 20px;
font-weight: bold;
background-color: pink;
}
.active{
background-color: #00FFFF;
color: #ffffff;
}
</style>
效果如图: