手册版本 V3.0

布局介绍

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

注意事项

演示代码使用了 自定义导航模式，请开启页面的自定义导航 (:

{

"pages": [

{

"path": "pages/demo/demo",

"style": {

"titleNView" : false,

"navigationStyle" : "custom"

}

}

原理介绍

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

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

完整代码