<!--
作者：dailc
时间：2017-08-28
描述： 配置项全开的列表示例（所有主题都支持的配置项）
一些特殊的配置项会单独作为示例（如default主题的successAnim）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>options list</title>
<link rel="stylesheet" href="../../dist/debug/minirefresh.css" />
<link rel="stylesheet" href="../common/common.css" />
</head>
<body>
<nav class="navbar-header">
<a class="nav-btn-left" href="../index.html">dashboard</a>
所有通用配置项全开
</nav>
<div class="content">
<div id="minirefresh" class="minirefresh-wrap">
<div class="minirefresh-scroll">
<div class="notice">
<p class="btn-switch">更新options状态（默认状态）</p>
</div>
<ul class="data-list" id="listdata">
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="../../dist/debug/minirefresh.js"></script>
<script type="text/javascript" src="../common/common.js"></script>
<script>
var appendTestData = Common.appendTestData,
bindEvent = Common.bindEvent,
// 记录一个最新
maxDataSize = 30,
listDom = document.querySelector('#listdata'),
requestDelayTime = 600;
var miniRefresh = new MiniRefresh({
// 下拉有关
down: {
// 默认没有锁定，可以通过API动态设置
isLock: false,
// 是否自动下拉刷新,启用后会自动触发一次下拉刷新，优先级要高于up的自动loading，有了这个up的就不会执行了
// 注意,default主题时，其实下拉刷新动画和上拉效果一样的，不要被迷惑了
isAuto: false,
// 设置isAuto=true时生效，是否在初始化的下拉刷新触发事件中显示动画，如果是false，初始化的加载只会触发回调，不会触发动画
isAllowAutoLoading: true,
// 是否不管任何情况下都能触发下拉刷新，为false的话当上拉时不会触发下拉
isAways: false,
// 是否每次下拉完毕后默认重置上拉
isAutoResetUpLoading: true,
// 下拉要大于多少长度后再下拉刷新
offset: 75,
// 阻尼系数，下拉的距离大于offset时,改变下拉区域高度比例;值越接近0,高度变化越小,表现为越往下越难拉
dampRate: 0.3,
// 回弹动画时间
bounceTime: 300,
// 以下几个字段是主题显示中的，几乎所有主题都会提供配置
contentdown: '下拉刷新',
// 可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentover: '释放刷新',
// 可选，正在刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: '加载中...',
callback: function() {
setTimeout(function() {
// 每次下拉刷新后，上拉的状态会被自动重置
appendTestData(listDom, 10, true);
miniRefresh.endDownLoading(true);
}, requestDelayTime);
},
// 下拉取消的回调
onCalcel: function() {
console.log("取消了刷新");
},
// 下拉过程回调
onPull: function(downHight, downOffset) {
console.log("下拉:" + downHight);
}
},
// 上拉有关
up: {
// 默认没有锁定，可以通过API动态设置
isLock: false,
// 是否自动上拉加载-初始化是是否自动
isAuto: true,
// 距离底部高度(到达该高度即触发)
offset: 100,
loadFull: {
// 开启配置后，只要没满屏幕，就会自动加载
isEnable: true,
delay: 300
},
// 是否默认显示上拉进度条，可以通过API改变
isShowUpLoading: true,
// 以下几个字段是主题显示中的，几乎所有主题都会提供配置
contentdown: '上拉显示更多',
contentrefresh: '加载中...',
contentnomore: '没有更多数据了',
callback: function() {
setTimeout(function() {
appendTestData(listDom, 4);
miniRefresh.endUpLoading(listDom.children.length >= maxDataSize ? true : false);
}, requestDelayTime);
},
// 滑动过程回调
onScroll: function(scrollTop) {
console.log("滑动:" + scrollTop);
}
},
// 容器
container: '#minirefresh',
isLock: true,
// 默认不使用body的scroll而是使用dom本身的scroll
// 如果使用body的scroll，一个页面请只配置一个下拉刷新，否则会有冲突
isUseBodyScroll: false
});
var STATE_DEFAULT = 0,
// 锁定下拉
STATE_LOCK_DOWN = 1,
// 锁定上拉
STATE_LOCK_UP = 2,
// 下拉变为always，就是是上拉时也可以加载
STATE_DOWN_ALWAYS = 3,
// 开启成功动画
STATE_DOWN_SUCCESS_ANIM = 4,
// 拉长下拉时间
STATE_DOWN_DURATION = 5,
// 隐藏toTop
STATE_UP_TOTOP_HIDE = 6,
// 关闭loadfull
STATE_UP_LOADFULL_DISABLE = 7,
// 隐藏加载更多动画
STATE_UP_LOADING_HIDE = 8;
var STATE_TIPS = ['默认状态', '锁定下拉', '锁定上拉', '允许上拉时下拉',
'开启下拉成功动画', '延长下拉动画时间', '隐藏toTop', '关闭自动满屏', '隐藏上拉动画'];
var currStatus = STATE_DEFAULT;
var changeStatus = function(status) {
status++;
status %= STATE_UP_LOADING_HIDE + 1;
return status;
};
var getOptionsByStatus = function(status) {
return {
down: {
// 默认没有锁定，可以通过API动态设置
isLock: status === STATE_LOCK_DOWN,
// 是否不管任何情况下都能触发下拉刷新，为false的话当上拉时不会触发下拉
isAways: status === STATE_DOWN_ALWAYS,
// 回弹动画时间
bounceTime: status === STA
minirefresh.js插件制作的手机端下拉刷新加载代码.zip
版权申诉
46 浏览量
2023-09-26
01:42:17
上传
评论
收藏 1.22MB ZIP 举报
minirefresh.js插件制作的手机端下拉刷新加载代码.zip （102个子文件） 
mui.min.css 74KB swiper.css 20KB swiper.min.css 17KB minirefresh.css 5KB minirefresh.min.css 3KB minirefresh.theme.taobao.css 2KB common.css 2KB minirefresh.theme.applet.css 2KB minirefresh.theme.taobao.min.css 2KB minirefresh.theme.drawer3d.css 1KB minirefresh.theme.default.css 1KB minirefresh.theme.applet.min.css 1KB minirefresh.theme.drawerslider.css 995B minirefresh.theme.default.min.css 983B minirefresh.theme.drawer3d.min.css 931B minirefresh.theme.drawerslider.min.css 607B
options_list.html 10KB nested_muiscroll.html 8KB nested_swipe.html 6KB index.html 5KB nested_slider.html 5KB nested_muitransparent.html 5KB multicontainer_multilist.html 5KB index.html 5KB nested_horizonscroll.html 4KB vue_list.html 4KB onecontainer_multilist.html 4KB csstranslate_list.html 4KB theme_taobao.html 3KB successanim_list.html 3KB theme_applet.html 3KB theme_drawerslider.html 3KB theme_drawer3d.html 3KB base_list.html 2KB
taobao-bg.jpg 96KB taobao-bg.jpg 96KB cbd.jpg 28KB taobao-bg.jpg 27KB muwu.jpg 23KB yuantiao.jpg 16KB shuijiao.jpg 14KB mui.js 252KB swiper.js 231KB swiper.jquery.js 204KB swiper.jquery.umd.js 204KB mui.min.js 120KB swiper.min.js 94KB swiper.jquery.min.js 85KB swiper.jquery.umd.min.js 85KB vue.min.js 80KB minirefresh.js 56KB minirefresh.min.js 19KB minirefresh.theme.default.js 18KB minirefresh.scroll.js 17KB scroll.js 16KB minirefresh.theme.default.js 15KB minirefresh.theme.taobao.js 14KB default.js 14KB minirefresh.core.js 13KB taobao.js 11KB core.js 10KB minirefresh.theme.drawer3d.js 9KB minirefresh.theme.drawerslider.js 9KB minirefresh.theme.default.min.js 8KB minirefresh.js 8KB minirefresh.theme.applet.js 8KB gulpfile.js 7KB minirefresh.theme.taobao.min.js 6KB minirefresh.theme.drawer3d.js 6KB minirefresh.theme.drawerslider.js 5KB drawer3d.js 5KB lang.js 5KB applet.js 5KB drawerslider.js 4KB minirefresh.theme.drawer3d.min.js 4KB minirefresh.theme.drawerslider.min.js 4KB minirefresh.theme.applet.min.js 4KB common.js 3KB rollupbuild.js 2KB os.js 1KB raf.js 830B index.js 566B debug.js 162B swiper.min.js.map 352KB swiper.jquery.min.js.map 310KB swiper.jquery.umd.min.js.map 310KB
taobao-moon.png 162KB taobao-moon.png 45KB taobao-moon.png 45KB minirefresh-totop.png 7KB minirefresh-totop.png 7KB minirefresh-totop.png 7KB totop.png 549B common.styl 4KB taobao.styl 2KB drawer3d.styl 2KB default.styl 1KB applet.styl 1KB drawerslider.styl 1KB index.styl 25B共 102 条
- 1
- 2
资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- Python 程序语言设计模式思路-创建型模式：原型模式：通过复制现有对象来创建新对象，面向对象编程
- 卸载软件geek卸载软件geek
- Python 程序语言设计模式思路-创建型模式：单例模式，确保一个类的唯一实例（装饰器）面向对象编程、继承
- skywalking-plugins.jar skywalking-alarm.jar
- 独栋别墅图纸D020-两层-10.00&11.00米- 施工图.dwg
- Python 程序语言设计模式思路-创建型模式：工厂模式，创建对象的统一接口，封装对象的创建逻辑
- python自学教程-05-json数据格式的介绍.ev4.rar
- python自学教程-04-自定义JavaScript.ev4.rar
- 《淘宝后台系统...》
- skywalking-plugins.jar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
