• #Java Web累积#关于MUI的上滑和下拉加载


    其实按照MUI的文档去写,也没什么问题:

    JSP中:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/resources/mui/mui.min.css" />
    </head>

    <body>

    <div id="surveryList" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron toolList">
    <li class="mui-table-view-cell">
    第6个选项卡子项-8
    </li>
    <li class="mui-table-view-cell">
    第6个选项卡子项-8
    </li>
    </ul>
    </div>
    </div>

    </body>
    </html>

    <script src="/resources/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/resources/js/lib/jquery-3.0.0.min.js" type="text/javascript"></script>
    <script src="/resources/js/common/common.js" type="text/javascript"></script>
    <script src="/resources/js/common/network.js" type="text/javascript"></script>
    <script src="/resources/js/unique/survery/surveryforSupport.js" type="text/javascript"></script>

    在js中:

    $(function(){
        AddListRefresh();
    });
    
    function AddListRefresh() {
        mui.init({
            pullRefresh: {
                container: '#surveryList',
                down: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: false,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在刷新...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
                    callback: pulldownRefreshMySurvery
                }
            }
        });
    }
    
    function pulldownRefreshMySurvery()
    {
        setTimeout(function() {
            mui('#surveryList').pullRefresh().endPulldownToRefresh();
        }, 500);
    }
    

    以上:

    本次十分想记载一下,是因为,在本次的code中走了蛮多弯路。根据需求,使用了下标签(tab)和 上标签(segment),本使用同有个文件来管理不同的table-item显示。

    造成在同一个jsp文件中,需要有多个tableview的下拉或上拉刷新。

    尝试了很多种方法,也查了很多资料,都不能很好的解决,那些不好的方法(mui.pullToRefresh.js)也就不记载了。

    最后无奈,还是把使用iframe来完成这些。

    还好,每个子页面中,只init一个id的上拉或下拉,MUI还是能很好的支持。

  • 相关阅读:
    如何在ASP.NET 5和XUnit.NET中进行LocalDB集成测试
    如何在单元测试过程中模拟日期和时间
    Azure Blob Storage从入门到精通
    免费电子书:使用VS Online敏捷管理开源项目
    使用ASP.NET 5开发AngularJS应用
    Syncfusion的社区许可及免费电子书和白皮书
    理解ASP.NET 5的中间件
    惊鸿一瞥(Glimpse)——开发之时即可掌控ASP.NET应用的性能
    用于Simple.Data的ASP.NET Identity Provider
    大数据技术之_19_Spark学习_01_Spark 基础解析小结(无图片)
  • 原文地址:https://www.cnblogs.com/Sanje3000/p/7955001.html
Copyright © 2020-2023  润新知