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还是能很好的支持。

  • 相关阅读:
    segnet 编译与测试
    ubuntu(已经配置了python2+opencv)简易配置python3的opencv:
    OCR光学字符识别--STN-OCR 测试
    阿里云图形界面
    win10+UEFI下u盘安装ubuntu16.04
    ubuntu16.04+cuda8.0+cudnn5.0+caffe
    Angular 组件通讯、生命周期钩子 小结
    Angular 路由⑦要素
    关于克隆gitlab项目的一些 问题列表
    RxJS学习笔记
  • 原文地址:https://www.cnblogs.com/Sanje3000/p/7955001.html
Copyright © 2011-2022 走看看