美文网首页微信小程序
微信小程序开发 scroll-view 实现锚点标记

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

作者: Juice_gg | 来源:发表于2018-03-13 11:03 被阅读9次

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

    原文链接

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/xjoafftx.html