小程序中滚动条的使用,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 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

【Mockplus教程】添加

1. 拖动添加 用鼠标从左侧组件面板中拖动一个组件到工作区,即可完成组件的添加。 2. 搜索添加 在上方组件搜索框中输入想要添加的组件名字,在自动弹出来...

3278
来自专栏代码GG之家

Scoops android app多主题架构(四)

使用Scoops ? 1:MainApp ? 使用addDayNightFlavor将一个主题设置为DayNight模式 2:在对应的主题里面配置上文本...

2046
来自专栏vue学习

12、vue-awsome-swiper与轮播图组件

1、上篇我们为了便于展示,把头部my-header组件放在了App.vue页面,现在我们删掉App.vue里面的头部组件然后我们在view文件里面新建一个hom...

2023
来自专栏Golang语言社区

如何使用golang实现操作键盘按键

https://godoc.org/github.com/nsf/termbox-go 这个库可以支持 简单示例: package main import...

3995
来自专栏GreenLeaves

JavaScript之<script>标签简介

向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性。 1、async:可选...

19810
来自专栏娱乐心理测试

小程序设置启动页面

4366
来自专栏州的先生

如何使用Selenium操纵浏览器打开网页

1525
来自专栏用户2442861的专栏

html 学习(css class选择器)

文/某个胖子(简书作者) 原文链接:http://www.jianshu.com/p/802afaab545b 著作权归作者所有,转载请联系作者获得授权,并...

1151
来自专栏一枝花算不算浪漫

[小知识点]绝对路径与相对路径.

28411
来自专栏GreenLeaves

JavaScript之将JS代码放在什么位置最合适

1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...

2007

扫码关注云+社区