uniapp 实现tabbar分类导航及滚动联动效果

思路：使用两个scroll-view，tabbar分类导航使用scrollleft移动，内容联动使用页面滚动onPageScroll监听滚动高度

效果图

<template>
<view class="content" >
<view :class="[isSticky ? 'tab-sticky': '']">
<view class="base-combox" >
<uni-icons type="location-filled" color="#85D8CE" size="25" />
<text class="tag-text">{{base[0].name}}</text>
</view>
<view class="u-tab" :class="[!isSticky ? 'tab-sticky': '']">
<scroll-view scroll-x="true" scroll-with-animation="true" class="u-tab-view menu-scroll-view" :scroll-left="scrollLeft">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[isActive == index ? 'u-tab-item-active' : '']"
 @tap.stop="swichMenu(index)">
<view class="u-line-1">{{item.name}}</view>
</view>
</scroll-view>
</view>

</view>

<scroll-view :scroll-top="scrollTop" scroll-y scroll-with-animation class="right-box" @scroll="upScroll">
<view class="page-view">
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
<view class="item-title">
<text>{{item.name}}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item1, index1) in item.children" :key="index1" @tap="goList(item1)">
<image v-if="item1.icon != ''" class="item-menu-image" :src="item1.icon" mode=""></image>
<view v-else class="item-menu-image row-c" style="background-color: #F4F6F8;"><text style="font-size: 20rpx;color: #d0d0d0;">加载失败</text></view>
<view class="item-menu-name">{{item1.name}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>

<script>
export default {
components: {

},
data() {
return {
moduleData: [],
base:[{name:"请选择地点",id:'0'}],
showType:'horizontally', //vertically,horizontally
menuIcon:'../../static/list_h.png',//../../static/list_v.png
tabbar: [],
isActive : 0,
scrollLeft: 0, // 横向滚动条位置
scrollTop: 0,
baseComboxH: 0,   // 地址区的高度
tabbarScrollW: 0, // 导航区宽度
tabbarScrollH: 0, // 导航区高度
isSticky: true, // 是否吸顶
timer: null // 定时器
}
},
onLoad(option) {
this.tabbar = [{id:1,name:"菜单一",children:[{id:11,name:"子菜单一"},{id:12,name:"子菜单二"}]},
{id:2,name:"菜单二",children:[{id:11,name:"子菜单一子菜单一子菜单一子菜单一",icon:"/static/bq2.png"},{id:12,name:"子菜单二"},{id:13,name:"子菜单三"},{id:14,name:"子菜单四"},{id:15,name:"子菜单五"},{id:16,name:"子菜单六"}]},
{id:3,name:"菜单三",children:[{id:21,name:"子菜单一"},{id:22,name:"子菜单二"}]},
{id:3,name:"菜单四",children:[{id:31,name:"子菜单一"},{id:32,name:"子菜单二"}]},
{id:5,name:"菜单五",children:[{id:41,name:"子菜单一"},{id:42,name:"子菜单二"}]},
{id:6,name:"菜单六",children:[{id:51,name:"子菜单一"},{id:52,name:"子菜单二"}]}]

},
onReady() {

},
mounted(){
this.getScrollW();
},
onPageScroll(e){
//console.log(e,e.scrollTop)
if(this.timer){
clearTimeout(this.timer)
}
this.timer = setTimeout(() => { // 节流
this.timer = null;
// scrollHeight为右边菜单垂直中点位置
// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
// scrollHeight为右边菜单头部位置
let scrollHeight = e.scrollTop + this.tabbarScrollH + this.baseComboxH + 26;
let len = this.tabbar.length
for (let i = 0; i < len-1; i++) {
let height1 = this.tabbar[i].top;
let height2 = this.tabbar[i + 1].top;
// console.log(height2,scrollHeight,height1)
if (scrollHeight >= height1 && scrollHeight < height2) {
this.tabbarStatus(i);
return ;
}
}
if(scrollHeight >= this.tabbar[len-1].top){
this.tabbarStatus(len-1);
return ;
}
}, 10)
},
methods: {
goList(value) {
var item = {title:value.title,labelName:value.labelName}
uni.navigateTo({
url:value.url+'?item='+encodeURIComponent(JSON.stringify(item))
})
},

/**
* 点击上方的tab切换
* @index 传入的 ID
*/
async swichMenu(index) {
if (index == this.isActive ) return;
//this.scrollLeft = 0;
this.$nextTick(function(){
//for (let i = 0; i < index - 1; i++) {
//this.scrollLeft += this.tabbar[i].width
//};
// this.isActive = index;
// // 效果三(当前点击子元素居中展示)  不受子元素宽度影响
// this.scrollLeft = this.tabbar[index].left - this.tabbarScrollW / 2 + this.tabbar[index].width / 2;
this.tabbarStatus(index);
//this.scrollTop = this.tabbar[index].top
uni.pageScrollTo({
    duration:200, // 毫秒
scrollTop: (this.tabbar[index].top - this.tabbarScrollH - this.baseComboxH - 18) // 位置
});
// console.log(this.scrollLeft,this.scrollTop)
})
},
// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
getScrollW() {
const query = uni.createSelectorQuery().in(this);
query.select('.u-tab-view').boundingClientRect(data => {
  // 拿到 scroll-view 组件宽度高度
  this.tabbarScrollW = data.width
  this.tabbarScrollH = data.height
 }).exec();
 query.select('.base-combox').boundingClientRect(data => {
   // 拿到 base-combox 高度
   this.baseComboxH = data.height
  }).exec();
 
query.selectAll('.u-tab-item').boundingClientRect(data => {
 let dataLen = data.length;
  for (let i = 0; i < dataLen; i++) {
  //  scroll-view 子元素组件距离左边栏的距离
  this.tabbar[i].left = data[i].left;
 //  scroll-view 子元素组件宽度
 this.tabbar[i].width = data[i].width
}
}).exec();
query.selectAll('.class-item').boundingClientRect(data => {
 let dataLen = data.length;
  for (let i = 0; i < dataLen; i++) {
  //  scroll-view 子元素组件距离上边栏的距离
  this.tabbar[i].top = data[i].top;
}
}).exec()

},
upScroll(e){
if(e.detail.scrollTop>50){
this.isSticky = true
}else{
this.isSticky = false
}
console.log(e.detail.scrollTop)
},
/**
* 设置上方菜单的滚动状态
* @index 传入的 ID
*/
async tabbarStatus(index) {
this.isActive = index;
// 效果三(当前点击子元素居中展示)  不受子元素宽度影响
this.scrollLeft = this.tabbar[index].left - this.tabbarScrollW / 2 + this.tabbar[index].width / 2;
}

}
}
</script>

<style scoped>
page{
background-color: #fafafa !important;
display: block;
/* overflow: hidden; */
}

.content {
    min-height: 100vh;
display: flex;
flex-direction: column;
}

.base-combox{
align-items: center;
justify-content: center;
height: 50rpx;
}

.u-tab-item-active {
position: relative;
color: #000;
font-size: 16px;
font-weight: 600;
}

.u-tab-item-active::after {
content: ''; // 必须
display: block;
width: 30px;
height: 4px;
background-color: #000;
margin: 0 auto;
border-radius: 10px;
}

.u-tab{
border-bottom: 1rpx solid #f2f2f2;
background-color: #ffffff;
z-index: 99;
width: 100%;
align-items: center;
height: 100rpx;
margin-top: 10px;
}

.u-tab-view{
box-sizing: border-box;
padding-left: 30rpx;
padding-right: 30rpx;
width: 100%;
white-space: nowrap;
}
.u-tab-item{
display: inline-block;
box-sizing: border-box;
line-height: 60rpx;
margin-right: 35rpx;
font-size: 16px;
padding-top: 10px;
},
.u-line-1{
padding-bottom: 7px;
}

/* 隐藏scroll-view滚动条 */
/deep/::-webkit-scrollbar{
display: none;
}
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
display: none
}

.right-box{
/* height: 100vh; */
}

.page-view {
padding: 16rpx;
flex-direction: column;
}

.class-item {
display: block;
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}

.class-item:last-child {
min-height: calc(100vh - 102rpx - 50rpx - 20rpx - 88rpx - 32rpx - 64rpx );

}

.item-title {
font-size: 26rpx;
color: $u-main-color; 
font-weight: bold;
}

.item-menu-name {
margin-top: 8rpx;
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}

.item-container {
display: flex;
flex-wrap: wrap;
}

.thumb-box {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}

.item-menu-image {
width: 60rpx;
height: 60rpx;
}

.tab-sticky{
display: flex;
flex-direction: column;
position: -webkit-sticky;
position: sticky;
top: var(--window-top);
z-index: 99;
background-color: #fff;
}

</style>

原文地址：https://blog.csdn.net/FenceRain/article/details/143733794

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！