微信小程序开发 scroll-view 实现锚点标记

微信小程序开发，使用 scroll-view 实现长页面的标记跳转

<scroll-view>容器的官网文档说明:

https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

 

实现该功能主要使用 <scroll-view> 的 scroll-into-view 属性，但是官方文档中没有这个功能的演示，并且有一些重要的配置官方文档也并没有说明，下文是实际开发中的解决方案。

 

重点 ：

1. 设置 page 的 height : 100%;

2. 设置 scroll-view 容器的高度，例如 height : 100%;

3. 使用 scroll-view 容器做最外层

4. 赋值 scroll-into-view，<scroll-view scroll-into-view="{ {toView}}">

5. 一定要给 scroll-view 设置方向属性 scroll-y="true" 

6. 跳转到位置的标记使用 id（定位），例如 <view id="mark1">

 

示例简介：实现以下效果，点击右面的导航跳转到左边列表的相应位置。

 

工程目录中点击鼠标邮件新建 page 页面

 

 

-------------- test.wxml 文件代码 --------------

<view class="list">

    <view bindtap='jumpTo' data-opt="list0">list0</