微信小程序实现锚点功能(2)

主要用到 scroll-view 组件  scroll-into-view  属性;当点击导航菜单的时候,我们改变相应的 scroll-into-view 的值,并且同时需要在  scroll-view 组件内相应位置处的子元素上定义相应的 id;因为scroll-into-view 值应为某子元素 id,设置哪个方向可滚动,则在哪个方向滚动到该元素。

scroll-view 组件使用的一些注意点:

1. scroll-into-view  与 上面提到的子元素id 不能以数字开头

2.bindscroll 属性 实时监听滚动 ; 如上面 页面滚动到一定位置显示导航按钮功能

3.scroll-top 、scroll-left 属性: 设置竖向或者横向滚动条位置,如上面 返回顶部 功能

4.scroll-with-animation 属性:滚动平滑过渡,提高体验

5.如果需要隐藏 scroll-view 的滚动条使用 css    ::-webkit-scrollbar{width: 0;height: 0;color: transparent;}

6.如果scroll-view占页面整个高度,可设置 scroll-view的高度 height:100vh , 设置height:100%无效  (vh:相对于视口的高度。视口被均分为100单位的vh

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d6344fa9a4a1dc0764d15173d7dcfe0d.html