options_list.html
9.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!--
作者：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,
// 是否显示滚动条
isScrollBar: 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 === STATE_DOWN_DURATION ? 2000 : 500,
successAnim: {
// 下拉刷新结束后是否有成功动画，默认为false，如果想要有成功刷新xxx条数据这种操作，请设为true，并实现对应hook函数
isEnable: status === STATE_DOWN_SUCCESS_ANIM
}
},
up: {
// 默认没有锁定，可以通过API动态设置
isLock: status === STATE_LOCK_UP,
toTop: {
isEnable: !(status === STATE_UP_TOTOP_HIDE)
},
loadFull: {
// 开启配置后，只要没满屏幕，就会自动加载
isEnable: !(status === STATE_UP_LOADFULL_DISABLE)
},
isShowUpLoading: !(status === STATE_UP_LOADING_HIDE)
}
};
};
var needReLoadingStatus = [STATE_DOWN_ALWAYS, STATE_UP_LOADFULL_DISABLE];
bindEvent('.btn-switch', function() {
currStatus = changeStatus(currStatus);
this.innerText = '更新options状态（' + STATE_TIPS[currStatus] + '）';
// 更新时一些关键特征，如 容器，回调等不要改变
// 只演示了部分，其实例如阻尼系数等都是可以改变的
miniRefresh.refreshOptions(getOptionsByStatus(currStatus));
// 一些特殊处理，比如always，因为需要看出效果
if (needReLoadingStatus.indexOf(currStatus) !== -1) {
appendTestData(listDom, 0, true);
miniRefresh.triggerUpLoading();
}
}, 'click');
</script>
</body>
</html>