效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e263b448d88217211e2a8e3a340ba69e.png)
实际代码
<template>
<view class="content">
<scroll-view scroll-y="true" class="nave-left" :scroll-into-view="scrollToLeft">
<view class="scroll">
<view
class="goods-type"
:class="{ isSelect: scrollToLeft === 'idx' + index }"
v-for="(val, index) in items"
:key="index"
@click="scrollRight(index)"
:id="'idx' + index"
>
{{ val.name }}
</view>
</view>
</scroll-view>
<scroll-view scroll-y="true" class="nav-right" :scroll-into-view="scrollToRight" scroll-with-animation="" @scroll="scrolling">
<view class="scroll">
<view class="goods-list" v-for="(val, index) in items" :key="index" :id="'id' + index">
<view class="goods-head">{{ val.name }}</view>
<view class="goods-body" v-for="(item, idx) in val.children" :key="idx">{{ item.name }}</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'goodsSecond',
data() {
return {
scrollToRight: '',
nodeHeight: [],
scrollToLeft: 'idx0',
items: [
{
name: 'A',
children: [
{
name: 'A1'
},
{
name: 'A2'
},
{
name: 'A3'
},
{
name: 'A1'
},
{
name: 'A2'
},
{
name: 'A3'
}
]
},
{
name: 'B',
children: [
{
name: 'B1'
},
{
name: 'B2'
},
{
name: 'B3'
},
{
name: 'B1'
},
{
name: 'B2'
},
{
name: 'B3'
}
]
},
{
name: 'C',
children: [
{
name: 'C1'
},
{
name: 'C2'
},
{
name: 'C3'
},
{
name: 'C1'
},
{
name: 'C2'
},
{
name: 'C3'
}
]
}
]
};
},
mounted() {
this.getGoodsLsit();
},
methods: {
getGoodsLsit() {
let view = uni
.createSelectorQuery()
.in(this)
.selectAll('.goods-list');
view.boundingClientRect(data => {
console.log('得到布局位置信息');
this.nodeHeight = data;
console.log(data);
}).exec();
},
scrollRight(index) {
this.scrollToRight = 'id' + index;
this.scrollToLeft = 'idx' + index;
},
scrolling(e) {
this.scrollLeft(Math.ceil(e.detail.scrollTop));
console.log(e.detail);
},
scrollLeft(e) {
for (let i = 2; i < this.nodeHeight.length; i++) {
if (e > this.nodeHeight[i - 1].top && e < this.nodeHeight[i].top) {
this.scrollToLeft = 'idx' + (i - 1);
} else if (e > this.nodeHeight[this.nodeHeight.length - 1].top) {
this.scrollToLeft = 'idx' + (this.nodeHeight.length - 1);
} else if (e < this.nodeHeight[1].top) {
this.scrollToLeft = 'idx0';
this.scrollToRight = 'id0';
}
this.scrollToRight = '';
}
}
}
};
</script>
<style>
.content {
width: 100%;
height: 100%;
display: flex;
}
.nave-left {
width: 187rpx;
height: 100%;
}
.nav-right {
width: 562rpx;
height: 100%;
}
.scroll {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.goods-type {
width: 150rpx;
height: 80rpx;
box-shadow: 0px 4px 7px 1px rgba(206, 148, 5, 0.24);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #a1a1a1;
}
.isSelect {
border: 2rpx solid rgb(206, 148, 5);
}
.goods-list {
width: 500rpx;
}
.goods-head {
width: 500rpx;
height: 80rpx;
display: flex;
align-items: center;
}
.goods-body {
width: 500rpx;
height: 150rpx;
display: flex;
align-items: center;
box-shadow: 0px 4px 7px 1px rgba(206, 148, 5, 0.24);
border-radius: 20px;
}
</style>
下面是思路
结构
<view class="nav">
<scroll-view scroll-y="true" class="nav-left" :scroll-top="scrollLeftTop" scroll-with-animation>
<view :id="'id' + val" class="menu" v-for="val in 15" @click="categoryClick(index)">
</view>
</scroll-view>
x
<scroll-view scroll-y="true" class="nav-right" :scroll-into-view="'idx' + scrollRightTop" @scroll="scrollTop" scroll-with-animation>
<swiper class="swiper" circular="true" autoplay="true" interval="5000" duration="500" indicator-dots="true" indicator-active-color="#ffffff">
<swiper-item v-for="(img, imgId) in banImg" :key="imgId">
<image :src="img" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view :id="'id' + val" class="menuTitle" v-for="val in 15">
{{val}}
</view>
</scroll-view>
</view>
样式
.nav{
width:100%;
height:100%;
display:flex;
}
.nav-left{
width:30%;
heght:100%;
display:flex;
flex-direction: column;
align-items: center;
}
.nav-right{
width:70%;
heght:100%;
display:flex;
flex-direction: column;
align-items: center;
}
交互
export default {
data() {
return {
banImg: ['轮播图图片地址'],
scrollLeftTop:'',
scrollRightTop: ''
arr:[]
};
},
methods: {
categoryClick( index) {
this.scrollRightTop == index ? (this.scrollRightTop =index - 1) : (this.scrollRightTop = index );
},
scrollTop(e) {
for (let i = 0; i < this.arr.length; i++) {
if (i > 0 && (e.detail.scrollTop >= this.arr[i - 1] && e.detail.scrollTop < this.arr[i])) {
this.scrollLeftTop = i;
return false;
} else if (i == 0 && e.detail.scrollTop < this.arr[i]) {
this.scrollLeftTop = i;
return false;
}
}
}
}
}