微信小程序

微信小程序开发 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">

原文链接

上一篇下一篇

猜你喜欢

热点阅读