更新记录

1.0.0（2025-12-20） 下载此版本

首次发布 实现联动

平台兼容性

uni-app(4.87)

jia-LinkedScroll 联动滚动组件

一个功能强大的 uni-app 左右联动滚动组件，支持左侧分类导航与右侧内容区域的双向联动滚动。

✨ 特性

• 📱 双向联动：左侧点击自动滚动右侧，右侧滚动自动高亮左侧
• 🎨 高度可定制：支持自定义样式、颜色、宽度等
• 🔌 插槽丰富：提供多个插槽，满足各种自定义需求
• ⚡ 性能优化：防抖、节流、并发控制，确保流畅体验
• 🎯 精准定位：智能计算滚动位置，支持底部阈值检测

🚀 快速开始

📖 API 文档

Props 属性

Events 事件

Slots 插槽

插槽参数说明

sidebar-item 插槽

• item: 当前分类数据对象
• index: 当前分类索引
• active: 是否为激活状态（Boolean）

content-header 插槽

• item: 当前分类数据对象
• index: 当前分类索引

content-item 插槽

• item: 当前内容项数据对象
• parentIndex: 父级分类索引
• index: 当前内容项在分类中的索引

Methods 方法

通过 ref 调用组件方法：

<template>
  <jia-LinkedScroll ref="scrollRef" :list="categories" />
</template>

<script setup>
import { ref } from 'vue'

const scrollRef = ref(null)

// 数据更新后刷新
const updateData = () => {
  // ... 更新数据
  scrollRef.value?.refresh()
}
</script>

💡 使用示例

<template>
    <view class="page-container">
        <LinkedScroll v-model="activeIndex" :list="categoryList" sidebar-width="180rpx" active-color="#00C853"
            :scroll-with-animation="true" bottom-placeholder-height="200rpx">

        </LinkedScroll>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue'
import LinkedScroll from '../LinkedScroll.vue'

const activeIndex = ref(0)

// 模拟分类数据
const categoryList = ref([{
    name: '热销推荐',
    description: '最受欢迎的商品',
    count: 8,
    goods: [{
        name: '招牌奶茶',
        description: '经典原味，香浓可口',
        price: '15.00',
        tag: '热销'
    },
    {
        name: '珍珠奶茶',
        description: 'Q弹珍珠，甜而不腻',
        price: '18.00',
        tag: '推荐'
    },
    {
        name: '芝士奶盖',
        description: '浓郁芝士，层次丰富',
        price: '22.00',
        tag: '新品'
    },
    {
        name: '水果茶',
        description: '新鲜水果，清爽解渴',
        price: '20.00'
    },
    {
        name: '抹茶拿铁',
        description: '日式抹茶，醇香浓郁',
        price: '24.00'
    },
    {
        name: '焦糖玛奇朵',
        description: '焦糖香甜，咖啡浓郁',
        price: '26.00',
        tag: '热销'
    },
    {
        name: '红豆奶茶',
        description: '红豆细腻，奶香浓郁',
        price: '19.00'
    },
    {
        name: '布丁奶茶',
        description: '滑嫩布丁，口感丰富',
        price: '21.00'
    }
    ]
},
{
    name: '奶茶系列',
    description: '经典奶茶，多种口味',
    count: 6,
    goods: [{
        name: '原味奶茶',
        description: '经典配方，回味无穷',
        price: '14.00'
    },
    {
        name: '巧克力奶茶',
        description: '浓郁巧克力，丝滑口感',
        price: '18.00'
    },
    {
        name: '香芋奶茶',
        description: '香芋浓香，绵密细腻',
        price: '17.00',
        tag: '推荐'
    },
    {
        name: '草莓奶茶',
        description: '草莓清香，酸甜可口',
        price: '19.00'
    },
    {
        name: '芒果奶茶',
        description: '芒果浓郁，热带风情',
        price: '20.00'
    },
    {
        name: '椰果奶茶',
        description: 'Q弹椰果，清爽解腻',
        price: '16.00'
    }
    ]
},
{
    name: '咖啡系列',
    description: '精品咖啡，提神醒脑',
    count: 5,
    goods: [{
        name: '美式咖啡',
        description: '纯正美式，浓郁醇厚',
        price: '18.00'
    },
    {
        name: '拿铁咖啡',
        description: '奶香浓郁，口感顺滑',
        price: '22.00',
        tag: '推荐'
    },
    {
        name: '卡布奇诺',
        description: '奶泡细腻，咖啡香浓',
        price: '24.00'
    },
    {
        name: '摩卡咖啡',
        description: '巧克力融合，甜而不腻',
        price: '26.00'
    },
    {
        name: '冰美式',
        description: '冰爽提神，醒脑解暑',
        price: '20.00',
        tag: '热销'
    }
    ]
},
{
    name: '果茶系列',
    description: '新鲜水果，健康饮品',
    count: 7,
    goods: [{
        name: '柠檬茶',
        description: '清新柠檬，酸甜开胃',
        price: '16.00'
    },
    {
        name: '百香果茶',
        description: '百香果香，酸甜适中',
        price: '18.00',
        tag: '推荐'
    },
    {
        name: '西柚茶',
        description: '西柚清香，清爽解腻',
        price: '19.00'
    },
    {
        name: '蜜桃乌龙',
        description: '蜜桃香甜，乌龙清香',
        price: '21.00',
        tag: '新品'
    },
    {
        name: '葡萄柚绿茶',
        description: '葡萄柚清香，绿茶清爽',
        price: '20.00'
    },
    {
        name: '芒果绿茶',
        description: '芒果浓郁，绿茶清新',
        price: '22.00'
    },
    {
        name: '草莓果茶',
        description: '草莓鲜甜，果香四溢',
        price: '23.00',
        tag: '热销'
    }
    ]
},
{
    name: '奶盖系列',
    description: '浓郁奶盖，层次丰富',
    count: 4,
    goods: [{
        name: '芝士奶盖绿茶',
        description: '芝士浓郁，绿茶清香',
        price: '24.00',
        tag: '推荐'
    },
    {
        name: '芝士奶盖红茶',
        description: '芝士香浓，红茶醇厚',
        price: '24.00'
    },
    {
        name: '芝士奶盖乌龙',
        description: '芝士细腻，乌龙清香',
        price: '25.00'
    },
    {
        name: '芝士奶盖水果茶',
        description: '芝士与水果的完美结合',
        price: '28.00',
        tag: '新品'
    }
    ]
},
{
    name: '小吃甜品',
    description: '美味小食，甜蜜时光',
    count: 6,
    goods: [{
        name: '蛋挞',
        description: '酥皮香脆，蛋液细腻',
        price: '8.00'
    },
    {
        name: '泡芙',
        description: '外酥里嫩，奶油香甜',
        price: '12.00',
        tag: '推荐'
    },
    {
        name: '提拉米苏',
        description: '意式经典，浓郁香醇',
        price: '28.00'
    },
    {
        name: '芝士蛋糕',
        description: '芝士浓郁，口感细腻',
        price: '25.00'
    },
    {
        name: '布丁',
        description: '滑嫩Q弹，甜而不腻',
        price: '10.00'
    },
    {
        name: '双皮奶',
        description: '顺滑细腻，奶香浓郁',
        price: '15.00',
        tag: '热销'
    }
    ]
}
])
</script>

<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
}
</style>

🎯 数据格式要求

基本格式

const list = [
  {
    name: '分类名称',           // 必需：分类名称
    children: [               // 必需：子项数组（也可以使用 goods）
      {
        name: '项目名称',      // 推荐：项目名称
        desc: '项目描述',      // 可选：项目描述
        // ... 其他自定义字段
      }
    ]
  }
]

支持的子项字段名

组件会自动识别以下字段名作为子项数组：

• children（推荐）
• goods（商品场景）

// 方式 1：使用 children
{
  name: '分类A',
  children: [...]
}

// 方式 2：使用 goods
{
  name: '分类B',
  goods: [...]
}

⚠️ 注意事项

1. 容器高度：组件需要明确的高度，建议父容器设置 height: 100vh 或固定高度

   <view style="height: 100vh;">
    <jia-LinkedScroll :list="dataList" />
   </view>

2. 数据格式：确保每个分类对象包含 name 字段和 children/goods 数组

3. 动态数据：数据变化后如果滚动位置不准确，调用 refresh() 方法重新计算

4. 底部占位：如果最后一个分类内容较少，可以调整 bottomPlaceholderHeight 确保能滚动到顶部

5. 样式穿透：使用 :deep() 或 ::v-deep 修改组件内部样式

   :deep(.secondary-scroll) {
    background-color: #f5f5f5;
   }