单机导航栏滚动到页面对应的位置俗称抛锚

原创
07/02 16:59
阅读数 0

wxml代码如下:

<button bintap='toList3'></button>

<scroll-view scroll-into-view='{{position}}' scroll-y='true' scroll-with-animation="true">    <view id="list1">        ...超级多的内容....    </view>    <view id="list2">        ...超级多的内容....    </view>    <view id="list3">        ...超级多的内容....    </view> </scroll-view>

js代码如下:

toList2:function(){    this.setData({        position:'list2'    }) }

看了上面的代码是不是感觉超简单,但是还需要注意几个地方下面才是重中之重:

  1. page的高度设置为100%

  2. scroll-view的高度设置为100%

  3. scroll-into-view的值是即将跳转到界面中id对应的值得为之

  4. scroll-y开启上下滑动

  5. scroll-width-animation设置为true(非必要因素,但是你想要丝般顺滑还是开启比较好)

本文分享自微信公众号 - 点滴前端(DDIWEB)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部