收藏
评论

小程序中滚动条的使用,pageScrollTo和scroll-view的对比

知晓程序员,专注微信小程序开发的程序员!

近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指定位置,<scroll-view>组件可以设置scroll-top或者scroll-left的值,今天探讨一下使用哪种方式更合适。



1、wx.pageScrollTo

官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/scroll.html

示例代码:

wx.pageScrollTo({
scrollTop: 0
})


使用此方式,你需要知道以下几点:

1、小程序基础库1.4.0之前不支持此方法,这点儿比较坑

2、小程序中双击顶部的textbar,会默认回到顶部

3、能够触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4、当页面中有使用position:fixed布局时,弹出键盘时,fixed布局部分会闪屏


2、<scroll-view>

小程序中另一种实现滚动条的方式,是使用scroll-view组件。官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html


详细的参数,请仔细查看官方文档~


示例代码:

<scroll-view class="scroll-view" scroll-y style="height: 500px;" scroll-top="{{scrollTop}}">
 <view id="green" class="bc_green"></view>
 <view id="red"  class="bc_red"></view>
 <view id="yellow" class="bc_yellow"></view>
 <view id="blue" class="bc_blue"></view>
</scroll-view>


使scroll-view组件方式,你需要知道以下几点:

1、纵向滚动(scroll-y)时,必须设置height值,并且不能使用css中的calc来计算,scroll-top值才会生效

2、小程序中双击顶部的textbar,无法回到顶部

3、无法触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4、当页面中position:fixed布局不受影响


最后一次编辑于  2018-03-19  (未经腾讯允许,不得转载)
复制链接收藏赞 0

4 个评论

  • 连胜
    连胜
    2018-03-27

    自己顶一下~

    2018-03-27
    赞同
    回复
  • Lu~
    Lu~
    2018-04-08

    顶一下

    2018-04-08
    赞同
    回复
  • 奇诺
    奇诺
    2018-04-20

    请问下

    如果我不用scroll-top,那么我用calc来设置height是可以的吧?


    2018-04-20
    赞同
    回复
  • 实用记事本小程序
    实用记事本小程序
    2018-08-07

    scroll-view中不能使用textarea很奇葩

    2018-08-07
    赞同
    回复