mui 上拉加载更多
看起来很简单的东西,实践过程中还是出现了很多麻烦,比如上拉时,状态条跑到了顶部,因为内容没有添加到容器中,再比如下拉的回调函数使用问题,this的传递。
html实现部分:
<div class="list-t-wrap">
<div id="refreshContainer" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="list-wrapper">
<!--列表一定要放到容器内,因为会有一个div append到mui-scroll中,需要在底部才能起作用-->
</div>
</div>
</div>
</div>
js代码的实现过程:
mui.init({
pullRefresh : {
container:"#refreshContainer",//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
height:50,// 可选.默认50.触发上拉加载拖动距离
auto:false,// 可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",// 可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',// 可选,请求完毕若没有更多数据时显示的提醒内容;
callback : function() {
var self = this; // 这里的this == mui('#refreshContainer').pullRefresh()
// 加载更多的内容
loadMore(this);
} //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
}); //
var loadMore = function(pullRefresh) {
// 加载更多的内容到列表中
// TODO
// 如果没有更多数据了,则关闭上拉加载
pullRefresh.endPullupToRefresh(true);
// 如果有更多数据,则继续
pullRefresh.endPullupToRefresh(false);
};
mui 上拉加载更多的更多相关文章
- mui 上拉加载更多的使用
最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...
- mui的上拉加载更多 下拉刷新 自己封装的demo
----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- mui 上拉加载 实现分页加载功能
mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- H5基于iScroll实现下拉刷新,上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
- 常见开发需求之angular上拉加载更多
需求 移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
随机推荐
- 子类构造函数 supper关键字
在导出类的构造函数,如果没有明确指定调用哪一个基类构造器,它会默默调用默认构造器. 如果不存在默认构造器,编译器就会报错. java编程思想 p158(p194)
- 区块链开发(五)git、truffle安装
truffle是以太坊最受欢迎的一个开发框架,本篇博客介绍truffle的下载安装过程. git安装 在安装truffle之前需要核实一下本机是否安装git程序.后面的程序安装需要依赖git. 输入以 ...
- docker 安装持久化mysql
https://hub.docker.com 拉取mysql镜像docker pull mysql:5.5运行mysql镜像并持久化到本地docker run -v /var/own/mysqldat ...
- [loj #6003]「网络流 24 题」魔术球 二分图最小路径覆盖,网络流
#6003. 「网络流 24 题」魔术球 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:Special Judge 上传者: 匿名 提交提交记录统计讨论测试数据 ...
- 在Ubuntu 16.04安装 Let’s Encrypt并配置ssl
1.安装前准备 1)要确保python的默认版本为2.7及以上版本. 2)需要配置的apache.nginx需要提前配置绑定域名. 2.安装ssl 在这个https://certbot.eff.org ...
- [bootstrap] 修改字体
file: variable.less @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-seri ...
- xampp 通过pear安装PHP_UML
1.在环境变量中添加D:\xampp\php // 如果前面已经有其他环境变量了,那么要用分号;跟前面的隔开 2.ctrl+R , cmd , pear install PHP_UML 3.如果提 ...
- Lookup 组件用法全解
Lookup是查找的意思,Lookup组件实现两个数据源的连接,和Join语句实现的功能类似,使用Lookup 组件需要配置: 两个输入:一个是上游数据流的输入Source Table,一个是要查找的 ...
- (6)python 循环控制
一.if语句 1.条件执行和if语句 2.else子句 3.elif子句 多个检查条件时 4.嵌套代码 5.空语句 使用pass占位 6.断言 关键字 assert 判断表达式前加上这个关键字表示, ...
- CSU 1330 字符识别? 【找规律】
你的任务是写一个程序进行字符识别.别担心,你只需要识别1, 2, 3,如下: .*. *** *** .*. ..* ..* .*. *** *** .*. *.. ..* .*. ...