Mui Webview下来刷新上拉加载实现
有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一demo就好了,那么就不会花费这么多的无用功了。今天使用mui 的webview实现了一个H5页面的上拉加载下拉刷新的效果,拿出来和大家一起分享一下,希望各位博友有用,当然啦有的时候坑会很多,但是只要我们学会用思考的方式去找问题,不管是什么问题我们都是可以解决的。小弟的文采不好,有错误请指出来,一定虚心接受
//首先在此之前我们先要引用jquery的插件,以及mui.js插件
<!--html代码-->
<!--需要加载的容器-->
<div class="shop-list font-16 col-1 mui-scroll-wrapper mui-content" id="refreshContainer">
<!--mui-scroll是否允许滑动-->
<div class="mui-scroll">
<!--重点mui-table-view mui-table-view-chevron这里是页面加载那些的文字样式-->
<ul class="mui-table-view mui-table-view-chevron" id="list">
</ul>
</div>
</div>
<!--MUIWEBvIEW分页-->
<script type="text/javascript">
$(function () {
//需要显示的条数
var size = ;
//页码
var page = ;
//下拉刷新监听事件(这里可以直接去mui文档中复制)
mui.init({
pullRefresh: {
container: '#refreshContainer',
//下拉刷新
down: {
height: ,//可选,默认50.触发下拉刷新拖动距离,
auto:false,//可选,默认false.自动上拉加载一次
callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
//5毫秒显示
window.setTimeout(function () {
//向下刷新重新赋值
page = ;
size = ;
//调用获取数据的方法
DtGetData(size, page);
//结束向下加载数据的提示的重点
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//最近发现的bug当每次重新向下刷新一次的时候总是会默认执行一次向下加载因此
//结束上拉加载endpulluptorefresh有更多数据传入false无则为true
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
}, );
}
}, //END 下拉刷新
up: {
height: ,//可选,默认50.触发下拉刷新拖动距离,
auto:true,
contentrefresh: "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
window.setTimeout(function () {
//调用加载更多数据的方法 DtGetData(size, page);
}, ); //END 上拉加载
}
}
}
});
//获取对应的数据
function DtGetData(a, b) {
//mui展示数据的方法
mui.ajax("api接口", {
data: { 'size': a, 'page': b },
dataType: 'json',
type: 'post',
headers: { 'Content-Type': 'application/json' },
success: function (data) {
$("#list").html("");
//是否结束向上加载数据是传入false否传入true
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//获取json格式的数据
var returnData = data.List;
//html dom属性
var element = document.getElementById("list");
//html标签遍历
for (var i = ; i < returnData.length; i++) {
$("#list").append("这里是绑定你在后台调取出来的数据");
}
//分页
var PageSize;
//获取总页数
if ((data.Total % size) > ) {
PageSize = (data.Total / size) + ;
}
else {
//能整除
PageSize = (data.Total / size);
}
if (PageSize < page) {
//当前显示数量大于总数时,停止上拉下拉结束转雪花进度条的“正在加载...”过程//停止下拉刷新(禁用上拉加载)
mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
//可以继续向上加载数据
mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
mui.toast("没有更多的数据")
}
else {
page++;
if (PageSize <page) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
mui.toast("暂无更多数据");
}
else {
//有重新触发上拉加载的需求
mui('#refreshContainer').pullRefresh().refresh(true);
}}},
error: function (xhr, type, errorThrown) {
//异常处理;
console.log(type);
}
})}
//在方法为进行事件监听,在方法里面会叠加多次执行
//监听tap时间解决页面href超链接不跳转的问题
mui('body').on('tap', 'a', function ()
{
document.location.href = this.href;
});
//解决mui屏蔽点击事件的bug,通过添加对应控件的点击事件
mui("#refreshContainer").on('tap', '.kedianji', function (event)
{
this.click();
});
})
</script>
效果图:
Mui Webview下来刷新上拉加载实现的更多相关文章
- mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- ListView下拉刷新上拉加载更多实现
这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...
- RecyclerView下拉刷新上拉加载(三)—对Adapter的封装
RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...
- RecyclerView下拉刷新上拉加载(二)
listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...
随机推荐
- Mybatis 系列3
系列文章 2 中,我们通过对mybatis源码的简单分析,可看出,在mybatis配置文件中,在configuration根节点下面,可配置properties.typeAliases.plugins ...
- Apache Solr vs Elasticsearch
http://solr-vs-elasticsearch.com/ Apache Solr vs Elasticsearch The Feature Smackdown API Feature Sol ...
- jquery文本框内容实时监控
$("#A").bind("input propertychange", function () { $("#B").val($(this) ...
- WiderG的博客皮肤
我的Skin 还是亮出自己的Blog定制代码吧: 其实也不是完全自己写的(有抄袭),也不大懂这方面的知识,代码冗长,逻辑不清,加载缓慢,见谅喽
- linux上nginx新建站点
遇到一个要将后台部分模块剥离出来,重新放到一个新的后台上的问题: 这样一来,就要在服务器上新建站点,but,服务器是linux系统的,不是很熟,经过多方努力,搞定了 在这记录一下,用到的linux命令 ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- 面向对象的WebAPI框架XXL-HEX
<面向对象的WebAPI框架XXL-HEX> 一.简介 1.1 概述 XXL-HEX 是一个简单易用的WebAPI框架, 拥有 "面向对象.数据加密.跨语言" 的 ...
- (汇总)os模块以及shutil模块对文件的操作
''' # os 模块 os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\' os.name 字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux ...
- TCP/IP Http 和Https socket之间的区别
TCP/IP Http 和Https socket之间的区别 TCP/IP是个协议组,它分为网络层,传输层和应用层, 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. ...
- Spring MVC 文件上传 & 文件下载
索引: 开源Spring解决方案--lm.solution 参看代码 GitHub: pom.xml WebConfig.java index.jsp upload.jsp FileUploadCon ...