微信小程序开发 scroll-view 实现锚点标记
2018-03-13 本文已影响9人
Juice_gg
微信小程序开发,使用 scroll-view 实现长页面的标记跳转
<scroll-view>容器的官网文档说明:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
实现该功能主要使用 <scroll-view> 的 scroll-into-view 属性,但是官方文档中没有这个功能的演示,并且有一些重要的配置官方文档也并没有说明,下文是实际开发中的解决方案。
重点 :
设置 page 的 height : 100%;
设置 scroll-view 容器的高度,例如 height : 100%;
使用 scroll-view 容器做最外层
赋值 scroll-into-view,<scroll-view scroll-into-view="{{toView}}">
一定要给 scroll-view 设置方向属性 scroll-y="true"
跳转到位置的标记使用 id(定位),例如 <view id="mark1">