• 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/
  • 相关阅读:
    C# 获取类似java gettime() 的时间格式
    LUbuntu电脑棒安装指南
    Visual Studio Gallery
    SQL SERVER 分页存储过程
    asp.mvc获取checkbox、radio、select的值
    C#面向对象的一些笔记
    Javascript预解析、作用域、作用域链
    解决ajax请求cors跨域问题
    Asp.Net操作WebServices
    2019年科技趋势前10位
  • 原文地址:https://www.cnblogs.com/dxt510/p/11201334.html
Copyright © 2020-2023  润新知