zoukankan      html  css  js  c++  java
  • 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉

      

    下拉刷新

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

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

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

    为了方便开发者一套代码解决问题,mui框架对2种方案进行了统一封装。
    参考:http://dev.dcloud.net.cn/mui/pulldown/

    当然iOS的5+runtime也支持和Android一样的原生下拉刷新,对iOS上div方式不满意的同学也可以直接使用原生下拉刷新,只是样式没法自定义。

    上拉翻页

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

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

  • 相关阅读:
    C# 根据二级栏目Id查询出所属文章的信息列表
    C#网站首页制作MVC
    C#Mvc退出登录
    C#Mvc修改密码
    C#网站开发之内容页Content
    C#Mvc登录功能
    Linux命令——shell
    学习笔记cisco常用命令
    性能相关术语
    Linux命令(一)
  • 原文地址:https://www.cnblogs.com/zhangchuangye/p/6809446.html
Copyright © 2011-2022 走看看