mui 之 下拉刷新 & 上拉加载

概述

为实现下拉刷新功能，大多数 H5 框架都是通过 DIV 模拟下拉回弹动画，在低端 android 手机上，DIV 动画经常出现卡顿现象（特别是图文列表的情况); mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问题，并且拖动效果更加流畅；

官方文档：https://dev.dcloud.net.cn/mui/pulldown/

有两种下拉刷新的方式

单 webview 模式

当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，不创建额外 webview，性能更优。

使用

只需要指定一个下拉刷新容器标识即可

代码块：mpullrefresh

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        刷新的内容写在这里面
    </div>
</div>

下拉刷新

<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down: {
                style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                height: '50px', //可选,默认50px.下拉刷新控件的高度,
                range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                auto: true, //可选,默认false.首次加载自动上拉刷新一次
                callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    // 下拉刷新的业务逻辑
                    // 一般是  ajax 请求

                    // 停止刷新，如果是 ajax 可以放在，ajax 处理完成之后。
                    mui('#refreshContainer').pullRefresh().endPulldown();

                }
            }
        }
    });
</script>

小例子

刷新成功，创建一个 <li>

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul id="list" class="mui-table-view">
            <!-- 列表 -->
            <li class="mui-table-view-cell">1</li>
        </ul>
    </div>
</div>
<!-- Js -->
<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down: {
                style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                auto: false, //可选,默认false.首次加载自动上拉刷新一次
                callback: function() { 
                    var list = document.getElementById("list")
                    // 创建新的 <li> 标签
                    var li = document.createElement("li")
                    li.className = "mui-table-view-cell"
                    li.innerHTML = "刷新成功"
                    list.appendChild(li)
                    // 停止刷新，其实是 停止刷新的动画
                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh()

                }
            }
        }
    });
</script>

双 webview 模式

使用

只需要指定一个下拉刷新容器标识即可，容器 与 上面一样

代码块：mpullrefresh

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        刷新的内容写在这里面
    </div>
</div>

下拉刷新，双 webview 模式 不需要指定 style: 'circle',

<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down: {
                auto: false, //可选,默认false.首次加载自动上拉刷新一次
                contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    // 下拉刷新的业务逻辑
                    // 一般是  ajax 请求

                    // 停止刷新，如果是 ajax 可以放在，ajax 处理完成之后。
                    mui('#refreshContainer').pullRefresh().endPulldown();

                }
            }
        }
    });
</script>

小例子

刷新成功，创建一个 <li>

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul id="list" class="mui-table-view">
            <!-- 列表 -->
            <li class="mui-table-view-cell">1</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down: {
                auto: true, //可选,默认false.首次加载自动上拉刷新一次
                contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    var list = document.getElementById("list")
                    // 创建新的 <li> 标签
                    var li = document.createElement("li")
                    li.className = "mui-table-view-cell"
                    li.innerHTML = "刷新成功"
                    list.appendChild(li)
                    // 停止刷新，其实是 停止刷新的动画
                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh()

                }
            }
        }
    });
</script>

上拉加载

其实跟下拉刷新差不多，只是变成了 on

<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: "#refreshContainer", 
            up: {
                height: 50, //可选.默认50.触发上拉加载拖动距离
                auto: false, //可选,默认false.自动上拉加载一次
                contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    setTimeout(function() {
                        // 停止动画
                        // 传入 true 会提示 没有更多数据了
                        this.endPullupToRefresh(true)
                    }.bind(this), 500)
                }
            }
        }
    });
</script>

小例子

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul id="list" class="mui-table-view">
            <!-- 列表 -->
            <li class="mui-table-view-cell">1</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: "#refreshContainer", 
            up: {
                height: 50, //可选.默认50.触发上拉加载拖动距离
                auto: false, //可选,默认false.自动上拉加载一次
                contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    setTimeout(function() {
                        // 传入 true 会提示 没有更多数据了
                        this.endPullupToRefresh(true)
                    }.bind(this), 500)
                }
            }
        }
    });
</script>

下拉刷新 & 上拉加载 同时使用，只需要 on 、down 同时定义即可