推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
连胜--小程序中滚动条的使用，wx.pageScrollTo和scroll-view的对比 ...
发布时间:2020-11-07前言：近期小程序项目中用到了滚动条功能，官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指定位置，组件可以设置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组件。官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
详细的参数，请仔细查看官方文档~
示例代码：
class="scroll-view" scroll-y style="height: 500px;" scroll-top="{{scrollTop}}"> id="green" class="bc_green"> id="red" class="bc_red"> id="yellow" class="bc_yellow"> id="blue" class="bc_blue">
使scroll-view组件方式，你需要知道以下几点：
1、纵向滚动(scroll-y)时，必须设置height值，并且不能使用css中的calc来计算，scroll-top值才会生效
2、小程序中双击顶部的textbar，无法回到顶部
3、无法触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件
4、当页面中position:fixed布局不受影响
本文标签
:- 上一篇：小程序上传图片到七牛
- 下一篇：微信小程序公共组件的引用与控制
