思路:使用两个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