• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉翻页

提升HTML5的性能体验系列之三 流畅下拉刷新和上拉翻页

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含html5性能测试,html5性能,高性能html5,html5 下拉菜单,html5下拉列表等相关知识,教程希望在学习及工作中可以帮助到您
"); </div>

下拉刷新

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况)。
解决方案还是webview。

既然拉div卡,那就不拉div,改拉webview。webview的拉动是原生的,回弹效果也是原生的,体验与原生一致。
思路是在父页面写titlebar,titlebar下面10像素左右写一个“下拉可刷新”。
然后append一个子webview,并设置为可下拉。
那么在把子webview往下拉时,会露出父页面的“下拉可刷新”字样,并且在拉到一定距离后会触发一个事件,js捕获到这个事件后可以更改“下拉可刷新”为“松开可刷新”。同样松开也会触发一个事件。

目前这个方案仅在Android上实现,iOS不存在性能问题,仍然可通过DIV拉动实现。

为了方便开发者一套代码解决问题,mui框架对2种方案进行了统一封装。
参考:http://dcloudio.github.io/mui/javascript/#pullrefresh-down

上拉翻页

App里很常见的列表是滚到最下面时载入下一页内容。
传统的思路里,是依靠js监听滚动条位置来实现。这导致任意滚动列表时,都会造成这个监听事件触发,容易引发列表滑动卡顿。
HTML5Plus扩展了一个事件,是原生的下拉到底事件,在webview滚动条到底部时会自动触发。
这样js只需监听这个拉到底事件即可,提升了App的执行性能。
5+ API参考:http://www.html5plus.org/#specification#/specification/Events.html
MUI封装参考:http://dcloudio.github.io/mui/javascript/#pullrefresh-up

这些代码示例在Hello H5+和Hello mui中都有。

您可能想查找下面的文章:

  • 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉翻页
  • 提升HTML5的性能体验系列之二 列表流畅滑动
  • 提升HTML5的性能体验系列之一 避免切页白屏

相关文章

  • 2017-05-31HBuilder mui 手拉手教你制作引导页
  • 2017-05-31HBuilder mui 里js动态添加数字输入框后,增加 减少按钮无效
  • 2017-05-31如何监听webview侧滑关闭,监听页面关闭的瞬间
  • 2017-05-31mui实现自动登录
  • 2017-05-31mui popover 自定义、弹出位置、显示、隐藏
  • 2017-05-31hbuilder 支付宝和微信支付插件配置
  • 2018-12-04mui页面无法滚动解决方法
  • 2017-05-31hbuilder快捷键大全_HBuilder代码块
  • 2017-05-31mui框架中input输入框或输入框聚焦后页面自动上移实现方法
  • 2017-05-31mui.plusReady无法加载

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HBuilder MUI 图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
    • MUI APP 项目收到Appstore的警告邮件
    • plus.webview.currentWebview() 如何获取当前窗口ID
    • Hbuilder MUI 下拉刷新全屏时高度如何调整?
    • mui 怎样监听scroll事件的滚动距离
    • Hbuilder mui如何close掉除了当前webview的其它所有webview
    • Hbuilder MUI 选择器(Picker)设置默认选项
    • HBuilder 适合做什么
    • Mui开发webapp项目demo
    • MUI iOS创建最精简离线打包工程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有