uni-app scroll-view 仿饿了么菜单关联滚动
效果如下：
视频
如果是视频列表可以参考
http://t.csdn.cn/pawUt
scroll.vue页面
<template>
<view class="scroll-box">
<scroll-view scroll-y="true" @touchmove.native.stop scroll-with-animation class="scroll-left"
:scroll-top="scrollTop" :scroll-into-view="itemId">
<view class="scroll-left-item" v-for="(item, i) in allData" @tap.stop="swichMenu(i)"
:class="{ 'scroll-left-item-active': current == i }" :key="i">
<view class="name">{{ item.name }}view>
根据自己的逻辑来写
view>
scroll-view>
<scroll-view scroll-y="true" class="scroll-right" :scroll-top="scrollRightTop" scroll-with-animation
@scroll="rightScroll">
<view class="scroll-right-item" v-for="(item, i) in allData" :class="'class' + item.id" :id="'item' + i" :key="i">
<view class="scroll-right-item-header">
{{ item.name }}
view>
<view class="right-li" v-for="(child, index) in item.chidren" :key="index">
{{child.name}}
根据自己的逻辑来写
view>
view>
scroll-view>
view>
template>
<script>
import scrollList from "./scrollMixin.js";
export default {
mixins: [scrollList],
name:'',
components: {
},
props: {
},
data() {
return {
allData: [{
name: '分类名称1',
id: 1,
chidren: [{
name: '子项123',
id: 11
},
{
name: '子项123',
id: 12
},
{
name: '子项123',
id: 13
},
{
name: '子项123',
id: 14
}
]
},
{
name: '分类名称1',
id: 2,
chidren: [{
name: '子项123',
id: 21
},
{
name: '子项123',
id: 22
},
{
name: '子项123',
id: 23
},
{
name: '子项123',
id: 24
}
]
},
{
name: '分类名称1',
id: 3,
chidren: [{
name: '子项123',
id: 31
},
{
name: '子项123',
id: 32
},
{
name: '子项123',
id: 33
},
{
name: '子项123',
id: 34
}
]
},
{
name: '分类名称1',
id: 4,
chidren: [{
name: '子项123',
id: 31
},
{
name: '子项123',
id: 32
},
{
name: '子项123',
id: 33
},
{
name: '子项123',
id: 34
}
]
}
]
};
},
computed: {
},
watch: {
},
created() {
},
mounted() {
},
onLoad(options) {
},
onShow() {
},
methods: {
},
};
script>
<style scoped lang="less">
@leftWidth: 162px;
.scroll-box{
background: #e3f5f5;
height: calc(100vh - 86rpx - var(--status-bar-height));
overflow: hidden;
padding-left: @leftWidth;
box-sizing: border-box;
.scroll-left{
width: @leftWidth;
height: 100%;
overflow: hidden;
background: #cef7f7;
position: fixed;
top: calc(86rpx + var(--status-bar-height));
left: 0rpx;
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
.scroll-left-item{
height: 200rpx;
line-height: 200rpx;
text-align: center;
&-active {
background: rgb(166, 255, 236);
}
}
}
.scroll-right {
width: calc(100vw - @leftWidth);
height: calc(100vh - 86rpx - var(--status-bar-height));
.right-li{
height: 200rpx;
padding: 20rpx;
// box-shadow: 0rpx 0rpx 10rpx #74fafa;
}
.scroll-right-item-header{
font-size: 40rpx;
}
}
}
style>
scrollMixin.js
export default {
data () {
return {
scrollTop: 0, // 左侧的滚动位置
current: 0, // 左侧当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
arr: [],
oldScrollTop: 0, // 右侧上次的滚动位置
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
itemId: '', // 栏目右边scroll-view用于滚动的id
timer: null, // 定时器
}
},
methods: {
// 点击左边的栏目切换
async swichMenu(index) {
if(this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function(){
this.scrollRightTop = this.arr[index];
this.current = index;
this.leftMenuStatus(index);
})
},
// 设置左边菜单的滚动状态
async leftMenuStatus(index) {
this.current = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('scroll-left', 'menuHeight');
await this.getElRect('scroll-left-item', 'menuItemHeight');
}
// 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
if(this.arr.length == 0) {
await this.getMenuItemTop();
}
if(this.timer) return ;
if(!this.menuHeight) {
await this.getElRect('scroll-left', 'menuHeight');
}
setTimeout(() => { // 节流
this.timer = null;
// scrollHeight为右边菜单垂直中点位置
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i];
let height2 = this.arr[i + 1];
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i);
return ;
}
}
}, 10)
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
resolve();
}).exec();
})
},
// 观测元素相交状态
async observer() {
this.allData.map((val, index) => {
let observer = uni.createIntersectionObserver(this);
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
observer.relativeTo('.scroll-right', {
top: 0
}).observe('#item' + index, res => {
if (res.intersectionRatio > 0) {
let id = res.id.substring(4);
this.leftMenuStatus(id);
}
})
})
},
// 获取右边菜单每个item到顶部的距离
getMenuItemTop() {
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.scroll-right-item').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if(!rects.length) {
setTimeout(() => {
this.getMenuItemTop();
}, 10);
return ;
}
rects.forEach((rect) => {
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
this.arr.push(rect.top - rects[0].top);
resolve();
})
}).exec()
})
},
}
}