Uni-App 双栏联动滚动组件开发详解 (电梯导航)

本文基于提供的代码实现一个左右联动的滚动组件，以下是详细的代码解析与实现原理说明：

技术实现要点

1. 双向滚动联动机制

• 导航 → 内容：通过 scroll-into-view 绑定计算属性，点击时自动定位
• 内容 → 导航：监听滚动事件，计算当前可见章节并更新激活状态

2. 性能优化设计

• 位置信息缓存：预先计算章节位置，避免频繁查询DOM
• 节流处理：滚动事件默认自带节流，保证性能
• 异步计算：使用 Promise 链保证初始化顺序

3. 自适应布局

• 动态高度计算：通过 uni API 获取容器实际高度
• Flex 布局：实现左右栏自适应排列

4. 扩展性考虑

• 组件化设计：通过 props 接收数据，方便复用
• 样式可配置：通过 class 控制样式，易于主题定制

使用示例