单 webview 模式

  • 效果展示：

    单 webview 模式 - 图1

  • 动画原理：

    下拉刷新时，触发的是原生下拉刷新控件，而整个webview位置不会发生变化，所以不会在拖动过程中发生DOM重绘，当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，相比双webview 模式，不创建额外 webview，性能更优。

  • 使用方法：

    mui 初始化时设置pullRefresh各项参数，与双 webview 模式的子页面设置是一样的。

    说明：

    1. DOM结构无特殊要求，只需要指定一个下拉刷新容器标识即可
    1. mui.init({
    2.   pullRefresh : {
    3.     container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    4.     down : {
    5.       style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
    6.       color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
    7.       height:'50px',//可选,默认50px.下拉刷新控件的高度,
    8.       range:'100px', //可选 默认100px,控件可下拉拖拽的范围
    9.       offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
    10.       auto: true,//可选,默认false.首次加载自动上拉刷新一次
    11.       callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    12.     }
    13.   }
    14. });

  • 模式说明：

    • 优点：
      • 性能更优，体现在两点：
        1. 相比双webview，不创建额外子 webview 性能消耗更少
        2. 下拉拖动过程中不会发生重绘，也减少了性能消耗
    • 缺点：
      • 目前仅支持‘cricle’样式以及该样式的颜色自定义