首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序中滚动条的使用,wx.pageScrollTo和<scroll-view>的对比

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

作者头像
连胜
发布2018-03-07 10:47:38
3.8K0
发布2018-03-07 10:47:38
举报

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

前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即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布局不受影响

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-11-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档