手册版本 V6.0

布局介绍

竖向区域切换布局实现了点击切换导航跳转到页面具体位置的功能，同时当页面滚动时会自动识别对应的切换导航。

布局原理

1 uni-app vue 版本
1.1 页面核心元素布局使用 <view class="mainitems"> 包裹;
1.2 当页面滚动时 根据 <view class="mainitems"> 的 top 值获取应该激活的切换导航;
1.3 当点击切换导航时计算 <view class="mainitems">的高度决定页面滚动位置;

2 nvue 版本
2.1 nvue 无法控制页面滚动条，使用页面主体使用 list 及 cell 布局;
2.2 页面核心元素布局使用 <view ref="mainitems"> 包裹;
1.2 当页面滚动时 根据 <view ref="mainitems"> 的 top 值获取应该激活的切换导航;
1.3 当点击切换导航时根据 <view class="mainitems">的索引滚动到对应位置;

兼容平台

完整代码