mui用ajax上拉加载更多,mui上拉加载更多的使用
demo地址
mui框架中上拉加载的坑
1、在函数自己上拉加载行为后的回调函数
2、在mui封装的上拉加载中,点击某一项会失效。
解决方法
1、该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下,需要设置显示为“加载更多”还是“没有更多数据了”。看了一些博客和官方文档,基本上都把这个设置放在了定时器中并在定时器中调用获取数据的方法(自己的业务需求)。
2、在mui封装的上拉加载中,点击某一项会失效。这个是真的很坑。就是采用事件监听的方式,阻止默认行为
示例代码
mui('选择器').on('tap','选择器',function(e){
e.preventDefault();
//自己的业务逻辑
})
一开始我将上述代码放在了mui.plusready()函数里面,可是事件并没有触发,所以,当我将它mui.plusready()中拿出来,事件就起作用了,我并不知道这是为什么,如果你偶尔看到这篇文章,可以告诉我一下。
demo代码
window.onload = function () {
/*750代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
关于mui的上拉加载
.mui-content {
background: #fff;
}
h2 {
font-size: 0.28rem;
line-height: .6rem;
padding-left: 10px;
}
.mui-scroll-wrapper {
top: .75rem;
}
上拉加载
list1
list2
list3
list4
(function ($, doc) {
var listContainer = doc.getElementById('listContainer');
mui.init({
pullRefresh: {
container: '#pullRefresh',//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up: {
height: 50,//可选.默认50.触发上拉加载拖动距离
auto: true,//可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: pullfreshFunc //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
var flag = true, counter = 1, pageSize = 10;
function pullfreshFunc() {
setTimeout(function () {
mui('#pullRefresh').pullRefresh().endPullupToRefresh(flag);//参数为true代表没有更多数据了。
getData();
}, 500);
}
function getData() {
mui.ajax({
type: 'get',
url: '../json/data.json',
data: {'counter': counter},
success: function (response) {
console.log(response);
let list = response.peopleList;
let html = "";
flag = !(list[0] == null || list[0] == "" || !list[0]);
if (flag) {
counter++;
}
for (let i = 0; i < list.length; i++) {
html += '
' + list[i].name + '';
}
jQuery('#listContainer').append(html)
},
error: function (error) {
console.log(error)
}
})
}
//点击单项事件
// mui中上拉加载中的坑1:点击事件失效(不需要放在mui.plusReady()中)
mui('#pullRefresh').on('tap', 'li.mui-table-view-cell', function (e) {
e.preventDefault();
console.log('触发点击事件了')
})
}(mui, document))
mui用ajax上拉加载更多,mui上拉加载更多的使用相关推荐
- php ajax 上拉显示更多,PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
- dropload.min.js 下拉刷新后,无法上拉加载更多
使用方法 1.引入文件 <script src="/app/media/js/dropload.min.js"></script> 111111111111 ...
- android 加载更多动画效果,Android实践之带加载效果的下拉刷新上拉加载更多
前言 之前写的一个LoadingBar,这次把LoadingBar加到下拉刷新的头部.从头写一个下拉刷新,附赠上拉加载更多.下面话不多说了,来一起看看详细的介绍吧. 效果图: 实现过程 首先是自定义属 ...
- Android使用RecyclerView实现上拉加载更多,下拉刷新,分组显示
项目地址:点击打开链接(https://github.com/MrGaoGang/luckly_recyclerview) 使用RecyclerView封装headerview,footerView, ...
- 微信小程序 下拉刷新/上拉加载更多 (上拉加载更多怎么实现)
参考:微信小程序开发文档->框架>逻辑层->注册页面 实现原理: 1.下拉刷新:由于小程序数据是实时渲染的.我们把data{}内的数据清空重新加载即可实现下拉刷新. 2.上拉加载更多 ...
- 微信小程序上拉加载 加载更多数据 触底加载 点击加载更多数据
开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for=&q ...
- 微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录 一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载 三.分包加载 什么是分包 为什么要使用分包 如 ...
- Java txt 下拉刷新_手写上拉加载,下拉刷新(小demo)
背景 使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大 ...
- 探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...
最新文章
- 3梅林刷官改变砖_陶瓷透水砖的四大明显优势
- boost::callable_traits添加member_cv的测试程序
- 寒江的网站基本优化观点
- 计算机和绘画的论文,浅析毕沙罗的绘画风格
- 纵有倚天剑还要屠龙刀,实现Power BI报表服务器自定义认证
- HackerOne漏洞奖励计划扩展至开源漏洞
- BIM族库下载——Revit家用电器族库
- TDD (test driver development)测试驱动开发
- GDevelop 5教程之 如何在不编程的情况下轻松制作手机游戏
- 复旦计算机考研规划,2021年复旦大学软件工程专业考研经验全指导
- 数据结构与算法之算法篇
- 东芝笔记本出现w ndows,夏日白色清新范 13.3英寸东芝L830评测
- java计算机毕业设计中国民航酒店分销系统源码+系统+lw+数据库+调试运行
- LVGL (7) 显示对接
- 1.3【展讯平台】Android 驱动(Kernel)、系统(framework) 定制,调试日志
- 结合实战暴利营销13种技巧方式总有一个万里挑一适合你!!!
- 计算机辅助技术学什么课,《CADCAM》课程导学计划
- 佳能Canon PIXMA MG2510 打印机驱动
- Java——计算机基础知识
- 全球及中国有机食品市场供需规模与未来竞争态势研究报告2022版
热门文章
- HBase性能优化方法总结(一):表的设计
- leetcode 650. 2 Keys Keyboard | 650. 只有两个键的键盘(暴力递归->傻缓存->DP)
- 算法设计与分析 0-1背包问题 动态规划解法【超详细】
- PAT1010 一元多项式求导 (25 分)
- kotlin学习之基础(一)
- 操作系统(5) -- 输入/输出管理
- L1-005 考试座位号 (15分) C语言实现(18行代码AC!)
- 算法竞赛入门经典|习题3-8, 循环小数(UVa202)
- android ui布局适配,Android适配全面总结(一)----屏幕适配
- k8s多节点仪表盘(web界面)部署与谷歌浏览器访问k8s仪表盘问题解决!