小程序中滚动条的使用,wx.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布局不受影响

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享

第九章:Shiro的Web——深入浅出学Shiro细粒度权限开发框架

Shiro可以和普通web集成的,但考虑到现在的应用基本都会使用spring,所以就不去讲最基本的web集成了。跟Spring集成的方式前面已经讲过了。 在We...

1979
来自专栏Java 技术分享

Ubuntu on win10

3698
来自专栏nummy

sublime3 配置go开发环境

在sublime下选择【工具菜单】,选择【编译系统】,继续选择【新编译系统】,在弹出的文件内写入如下代码:

491
来自专栏jojo的技术小屋

原 如何调试移动端页面

2116
来自专栏Android小菜鸡

Android FrameWork层框架

  Android的四层架构相比大家都很清楚,老生常谈的说一下分别为:Linux2.6内核层,核心库层,应用框架层,应用层。我今天重点介绍一下应用框架层Fram...

813
来自专栏更流畅、简洁的软件开发方式

我的网站的后台管理的结构图。

不知道这个能不能放在首页,不行的话我会测下来的。 另外这个算不算是一种架构呢? 欢迎大家多多批评指教! ? 说在前面: 1、 配置文件并不是 web.confi...

2065
来自专栏猛牛哥的博客

解决新版wordpress打开速度超级慢的问题

1733
来自专栏黑白安全

Meterpreter 端口转发

如何转发无法远程访问的本地端口。在本地计算机上运行特定服务。在本地网络上,这些服务通常是用于在本地计算机上访问,外网是不能访问的,比如MySQL服务器。出于安全...

723
来自专栏腾讯Bugly的专栏

打造“微信小程序”组件化开发框架

导语 Bugly 之前发了一篇关于微信小程序的开发经验分享,小伙伴们在公众账号后台问了很多关于小程序开发方面的问题,精神哥在查阅相关内容的时候,发现了龚澄同学自...

4233
来自专栏知无涯

移动端前端开发调试-将safari设置iPhone模拟器

38811

扫码关注云+社区