zoukankan      html  css  js  c++  java
  • mui上拉加载下拉刷新简单套用

    <link rel="stylesheet" href="../../public/assets/mui/css/mui.css">
    <script src="../../public/assets/mui/js/mui.js"></script>

    1、html

    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
          <div class="mui-scroll">
               <div class="mui-table-view mui-table-view-chevron unitconList"></div>
               <div class="mui-pull-bottom-pocket mui-block">
                    <div class="mui-pull">
                         <div class="mui-pull-loading mui-icon mui-spinner mui-hidden"></div>
                         <div class="mui-pull-caption mui-pull-caption-down">上拉显示更多</div>
                    </div>
               </div>
          </div>
          <div class="mui-scrollbar mui-scrollbar-vertical">
               <div class="mui-scrollbar-indicator"></div>
          </div>
    </div>

    2、js

      //初始化变量
      var count = 0;
      var page=0;  //页码
        $(function(){
                mui.init({
                    pullRefresh: {
                        container: '#pullrefresh',
                        down: {
                            callback: pulldownRefresh
                        },
                        up: {
                            contentrefresh: '正在加载...',
                            callback: pullupRefresh
                        }
                    }
                });
                //下拉加载
                function pulldownRefresh() {
                    $(".conList").html("");
                    $(".mui-pull-caption-down").text("");
                    setTimeout(function() {
                        page =1;  //初始化分页页码
                        nextlist(page); //初始化数据的方法
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                    }, 200);
                }
    
                // 上拉加载具体业务实现
                function pullupRefresh() {
                    setTimeout(function() {
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count<0)); //参数为true代表没有更多数据了。
                        page ++;  //分页页码累加
                        nextlist(page);   //初始化数据的方法
                    }, 200);
                }
                if (mui.os.plus) {
                    mui.plusReady(function() {
                        setTimeout(function() {
                            mui('#pullrefresh').pullRefresh().pullupLoading();
                        }, 200);
    
                    });
                } else {
                    mui.ready(function() {
                        mui('#pullrefresh').pullRefresh().pullupLoading();
                    });
                }
            });

     mui 官网   

    http://dev.dcloud.net.cn/mui/
  • 相关阅读:
    使用NetHogs监控进程网络使用情况
    ssh连接超慢解决
    Dnsmasq安装与配置-搭建本地DNS服务器
    解决rpm conflicts with file from package的两个方法
    shell中的crontab定时任务
    hive函数大全
    hive的高级查询(group by、 order by、 join 、 distribute by、sort by、 clusrer by、 union all等)
    sql中的case when then else end
    hive向表格中插入数据并分析语句
    将数据导入hive,再将hive表导入hbase
  • 原文地址:https://www.cnblogs.com/dxt510/p/11201334.html
Copyright © 2011-2022 走看看