使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。
套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”。真的是不错的框架。
想更多的了解这个框架:http://dev.dcloud.net.cn/mui/
那么如何实现下拉刷新,上拉加载的功能呢?
首先需要一个容器:
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
然后进行初始化操作,通过mui.init方法中pullRefresh参数配置上拉加载各项参数:
mui.init({
pullRefresh : {
container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
这里重点关注callback参数项,为必选内容,里边写刷新函数,根据具体的业务来写,在实际项目中,通常是通过ajax从服务器获取数据,然后进行html的动态拼接,形成数据项。
下面举一个很简单的例子:(实现上拉加载的功能)
容器:
1 <!--下拉刷新容器-->
2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
3 <div class="mui-scroll">
4 <!--数据列表-->
5 <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
6 </div>
7 </div>
一会要将数据放到 id=“testUl”的ul标签下,id当然随便取
调用mui.init方法:
<script type="text/javascript">
mui.init({
pullRefresh : {
container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; /*每次加载动态的添加一个li*/
$("#testUl").append($("<li>" + new Date() + "</li>")); this.endPullupToRefresh(false);
}
}
}
});
</script>
callback参数中,写的是加载函数,每次加载,动态生成一个li标签,用当前时间作为测试数据,贴到id=testUl的ul标签之下。
这里注意callback中的function最后的 this.endPullupToRefresh(false); 表示结束加载,参数可选true或false,true表示结束加载,false继续加载,在实际项目应用中,通常要根据服务器回传的数据量做一下判断。
over!! 这样每次上拉,都会加载一条当前的时间。
使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。的更多相关文章
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...
- vue mint-ui 框架下拉刷新上拉加载组件的使用
安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 带你实现开发者头条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 ...
随机推荐
- trace sql log
C:\Windows\system32>cd /d d:\PSSDIAG\pssd_2k12_x64 d:\PSSDIAG\pssd_2k12_x64>pssdiag.cmd 2014/ ...
- Android 多线程基础
需要注意几个概念:Runnable,Thread,Handler. 1. Runnable只是一个接口,里面包含run()函数.所以Runnable本身不会开启线程. 2. Thread实现Runna ...
- Java找那个io类-File获取功能
package com.hxzy.IOSer;import java.io.*; /* * File 的获取功能 * */public class Demo04 { public static voi ...
- ionic 项目 随笔
1,首先 会进入src/index.html, <!-- The polyfills js is generated during the build process --> <sc ...
- springMVC和Struts异同
Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring ...
- 记一次在CentOS系统搭建python3环境
首先,查看linux系统类型和版本:参考:查看linux系统类型和版本 默认Centos7中是有python安装的,但是是2.7版本,实际上这几个文件之间是有依赖关系的.在ls 后面加个 -al参数, ...
- Linux C 重定向简单范例
//前言:我们知道printf()会将信息输出到stdout流,然后展示到屏幕上. //那么我们所实现的简单的重定向就可以将stdout指向一个文件,然后读写,这样就达到了重定向的目的. //code ...
- Oracle递归查询(start with)
写代码时碰到要弄清楚Oracle的role之间的传递关系,就是有role A的话,可以通过grant A to B,把A赋予给B,又通过grant B to C .那我想知道所有role中,有哪些ro ...
- MDX常用几种查询对比
MDX1: SELECT NON EMPTY {Hierarchize( { [Measures].[年初数 的总和], [Measures].[期末数 的总和], [Measures].[本期发生数 ...
- linux系统服务管理
centos7的服务管理命令 systemctl start 服务名称 systemctl stop 服务名称 systemctl status 服务名称 systemctl restart 服务名称 ...