h5 app 实现页面刷新

实现步骤如下：

1. 先在head头部引入mui.css文件

<link rel="stylesheet" href="../lib/mui.css">

2. 在index.html底部引入mui.js文件

<script src="../lib/mui.min.js"></script>

3. 页面html 内容

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="index_ul mui-table-view mui-table-view-chevron">
      
    </ul>
  </div>
</div>

4. 在需要的页面js实现下拉刷新功能

mui.init({
    pullRefresh: {
      container: '#pullrefresh',
      down: {
      	auto: true,
        callback: pulldownRefresh,
        contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
	      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
	      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
      },
      // up: {
      //   contentrefresh: '正在加载...',
      //   callback: pullupRefresh
      // }
    }
  });
/**
   * 下拉刷新具体业务实现
   */

  function pulldownRefresh() {
    setTimeout(function() {
      console.log('实现了下拉刷新......')
      
      mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
    }, 1500);
  }

  if (mui.os.plus) {
    mui.plusReady(function() {
      setTimeout(function() {
        mui('#pullrefresh').pullRefresh().pullupLoading();
      }, 1000);

    });
  } else {
    mui.ready(function() {
      mui('#pullrefresh').pullRefresh().pullupLoading();
    });
  }

总结： 以上就是实现app下拉刷新的功能

注：此文章是开发项目过程中使用总结的，方便日后再次使用。

心情：想下班啦