连胜--小程序中滚动条的使用,wx.pageScrollTo和<scroll-view>的对比
来源:互联网 发布:php 处理图片 s3 编辑:程序博客网 时间:2024/05/07 13:08
前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即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布局不受影响
本文作者:连胜
原文地址:连胜-小程序中滚动条的使用,wx.pageScrollTo和<scroll-view>的对比 ...-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
- 连胜--小程序中滚动条的使用,wx.pageScrollTo和<scroll-view>的对比
- 小程序中scroll-view的使用
- 小程序中navigator和wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab,wx.navigateBack的用法
- Android View的滚动scroll
- 滚动的商店,scroll view
- 微信小程序开发(5)-新闻页之滚动制作(scroll-view)组件的使用
- 小程序wx:for、wx:for-items和wx:for-item的正确用法
- 微信小程序-横向滑动scroll-view隐藏滚动条
- jquery 滚动条 scroll 和 animate出现的问题总结
- 小程序 scroll-view
- 小程序 scroll-view 滚动刷新数据 增加swiper切换
- 小程序上拉下拉共存时不可使用scroll-view的解决方法
- 有关滚动条Scroll样式的设置
- 有关滚动条Scroll样式的设置
- 滚动条Scroll样式的设置
- 小程序scroll-view上下滑的内部加左右滑,scroll-x生效的情况
- 微信小程序scroll-view高度设置及scroll-into-view的使用跳转
- 如何隐藏隐藏Scroll View、List Ctrl或者其他窗口的滚动条
- java实现kettle
- 深度学习系列(1):感知机
- 各种Druid详细配置讲解
- window家族的关系
- Bmob小程序模板消息
- 连胜--小程序中滚动条的使用,wx.pageScrollTo和<scroll-view>的对比
- 共同学习Java源代码-数据结构-HashMap(十七)
- 算法笔记2
- ZooKeeper之Java客户端API使用—创建会话。
- Web.xml中Context-param的作用
- C++ 继承,private 以及 protected
- SQL Server链接服务器(一台机器SQL Server登陆,同时映射登陆到另外一台远程服务器的数据库)
- Python: 在Unicode和普通字符串之间转换
- 计算1*2*3+3*4*5+...+99*100*101