小程序中滚动条的使用,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程序员必看的调试技巧

调试可以帮助我们识别和解决应用程序缺陷,老九君下面介绍的调试方法基本都是通用的,有了下面的这些技巧在开发中会让我们在编程中事半功倍,避免浪费时间! 1.条件断点...

3516
来自专栏C/C++基础

Makefile教程

Makefile定义了软件开发过程中,项目工程编译链、链接的方法和规则。 由IDE自动生成或者开发者手动书写。 Unix(MAC OS、Solaris)和Lin...

992
来自专栏破晓之歌

前端开发必备!Emmet使用手册 转

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:

581
来自专栏老马寒门IT

高性能前端 art-template 模板

官网: https://aui.github.io/art-template/zh-cn/index.html

620
来自专栏编程

网页基础篇之如何制作简单的静态网页

每个人都有一个属于自己的星空 上一期介绍了sublime text3开发工具,那么接下来当然是开始了解代码。 一个静态网页大体由HTML, CSS和JavaSc...

2027
来自专栏张戈的专栏

Linux:sed命令详解

1. 简介 sed 是非交互式的编辑器。它不会修改文件,除非使用 shell 重定向来保存结果。默认情况下,所有的输出行都被打印到屏幕上。 ? sed 编辑器逐...

3506
来自专栏Aloys的开发之路

package-info.java文件详解

pacakge-info.java介绍 pacakge-info.java是一个Java文件,可以添加到任何的Java源码包中。pacakge-info.jav...

2058
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

3618
来自专栏mySoul

微信小程序初步入坑指南

https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

954
来自专栏hbbliyong

JavaScript 调试小技巧

‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入...

2637

扫描关注云+社区