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

#Java Web累积#关于MUI的上滑和下拉加载的更多相关文章

  1. mui上拉刷新+下拉加载

    具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  2. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  3. 基于Zepto移动端下拉加载(刷新),上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  4. iscroll5 上拉,下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

  5. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  6. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  7. PullToRefreshGridView上拉刷新,下拉加载

    PullToRefreshGridView上拉刷新,下拉加载 布局: <?xml version="1.0" encoding="utf-8"?> ...

  8. vux (scroller)上拉刷新、下拉加载更多

    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX=true height="-170" :pulldown-conf ...

  9. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

随机推荐

  1. Linking code for an enhanced application binary interface (ABI) with decode time instruction optimization

    A code sequence made up multiple instructions and specifying an offset from a base address is identi ...

  2. STM32-内存管理

    转载:http://www.cnblogs.com/guozhikai/p/6031904.html #ifndef __MALLOC_H #define __MALLOC_H #include &q ...

  3. write-ups

    https://github.com/MarioVilas/write-ups https://github.com/Deplorable-Mountaineer/Robot_Dynamite htt ...

  4. 为什么要用Jedis连接池+浅谈jedis连接池使用

    为什么要使用Jedis连接池 Redis作为缓存数据库理论上和MySQL一样需要客户端和服务端建立起来连接进行相关操作,使用MySQL的时候相信大家都会使用一款开源的连接池,例如C3P0.因为直连会消 ...

  5. 【hihocoder】sam-2

    原意是把sam那一堆做完…… 这题还是很sb的,$\sum{maxlen(s)-minlen(s)+1}$就是本质不同的子串数量 然后因为suffix link的性质,maxlen[fa[s]]=mi ...

  6. 【UOJ#164】清华集训2015V

    QwQzcysky真是菜死了,这是我刚上高一的时候坤爷在夏令营讲的,可是今天才切掉…… 想想也神奇,一个2016.11才学会线段树的菜鸡,夏令营的时候居然听过Segment-Tree-Beats? 所 ...

  7. HTML 知识点总结

    HTML基本语法 HTML标签 单标签 <标签名>或<标签名 /> 双标签 <标签名>内容</标签名> 跟标签也叫元素(根元素) 属性 属性属于标签 一 ...

  8. 取消div,a等标签点击效果

    当标签被设置onclick事件之后,在有些手机浏览器中,点击这些标签,会有点击变色效果.想要取消点击变色效果. 添加:div{-webkit-tap-highlight-color:rgba(0,0, ...

  9. [PAT] 1144 The Missing Number(20 分)

    1144 The Missing Number(20 分) Given N integers, you are supposed to find the smallest positive integ ...

  10. QT 中怎样使得控件与 界面等比例变化

    转自:https://github.com/exoticknight/blog-post/blob/master/python-with-Qt-application-development/pyth ...