zoukankan      html  css  js  c++  java
  • #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还是能很好的支持。

  • 相关阅读:
    APP性能之终端兼容优化分享
    Java反射机制
    语音编码的WAVE文件头格式剖析
    【原创】ASP.NET MVC3开发中遇到问题以及解决方法
    linux常用命令(基础)
    vue中粘贴板clipboard的使用方法
    解决部署zabbix中zabbixagent的状态为灰色现象
    IAR Embedded Workbench for ARM: Porting code from V4 to V5 ( for stm32)
    MSDN帮助文档 "无法显示该网页" 的问题解决方案(转)
    二叉排序树求每个结点平衡因子程序
  • 原文地址:https://www.cnblogs.com/Sanje3000/p/7955001.html
Copyright © 2011-2022 走看看