-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patht.html
160 lines (132 loc) · 5.83 KB
/
t.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script>
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
document.documentElement.style.width = "100%";
</script>
<title>tab</title>
<link href="touchpage.css" rel="stylesheet" type="text/css">
</head>
<body >
<!--大容器-->
<div class="touchContainer">
<!--导航条容器-->
<div class="tab-box">
<!--导航条实际内容-->
<div class="tab-bar">
<a href="javascript:;" class="navpage"><div>页面aaaaaaaa-1</div></a>
<a href="javascript:;" class="navpage">页面-2</a>
<a href="javascript:;" class="navpage">页面adwad-3</a>
<a href="javascript:;" class="navpage">页面ad-4</a>
<a href="javascript:;" class="navpage">页面-5</a>
<!--<span class="slidebar"></span>-->
</div>
</div>
<!--页面容器-->
<div class="viewbox">
<!--页面实际内容-->
<div id="viewport" class="viewport">
<div class="pageview" style="background: #3b76c0" >
<div style="height:5000px;" class="pagecontainer" num="0"><div></div>页面-1</div>
</div>
<div class="pageview" style="background: #58c03b;">
<div class="pagecontainer" num="1">页面-2</div>
</div>
<div class="pageview" style="background: #c03b25;">
<div class="pagecontainer" num="2">页面-3</div>
</div>
<div class="pageview" style="background: #e0a718;">
<div class="pagecontainer" num="3">页面-4</div>
</div>
<div class="pageview" style="background: #c03eac;">
<div class="pagecontainer" num="4">页面-5</div>
</div>
</div>
</div>
</div>
<script src="tool.js"></script>
<script src="touchPage.js"></script>
<script>
//接口
//options.slidePage,要滑动的页面,,那个大框框，不是每页的 必须
//options.slidePage;
//options.slideNavBar要滑动的导航 必须
//options.slideNavBar;
//options.slideNavBarParent导航所在的父级 必须
//options.slideNavBarParent;
//options.pageview每一页的类名 必须
//options.pageview;
//options.viewbox 必须 滑动页面的容器，，设置活动区域大小的
//options.viewbox;
//options.slidebar导航上，指示当前页的效果块,,可以设置，也可以不设置，设置了就用设置的，没设置，js自己生成
//options.slidebar ;
//options.tabbox导航的可视区域 必须
//options.tabbox ;
$(function() {
var mytouch = new touchEvent({
slidePage: ".viewport", //要滑动的页面,,那个大框框，不是每页的,所有页面宽度总和的的那个 必须
slideNavBar: ".navpage", //要滑动的导航 必须
pageview: ".pageview", //所哟滑动的页面的统一的类名 必须
pagecontainer: ".pagecontainer", //放真正详情内容的位置 必须
slideNavBarParent: ".tab-bar", //导航所在的父级，其宽度为导航的整体宽度，不是可视区 必须
viewbox: ".viewbox", //必须 滑动页面的容器，，设置活动区域大小的，活动的页面都将在这个范围里面活动
tabbox: ".tab-box", //导航的可视区域，导航的活动范围 必须
touchContainer: ".touchContainer", //将导航和页面整个放到这个容器里面，需要作为其两直接父级
goNextPageDistance: null, //正常状态下设置手指划过多少距离，页面才能跳到下页，，
goNextPageDistanceInSlide: null, //特殊状态下设置手指划过多少距离，页面才能跳到下页，，
touchLonForSlideStart: 40, //设置手指划过指定距离，页面才能跟着已启动
refresh: "yes", //是否开启单页下拉刷新。
XtoY: 5, //设置手指在一开始滑动的瞬间划过的水平距离比上垂直距离 小于这个要求页面才能动
YtoX: 4, //下拉刷新可开始滑动的滑动比例 越小越灵活
currentPageSign: null, //到第几个导航了的指示器，，那条红线，没传，js会自己创建。
startLoadingDate: "end", //滑动时是否开始加载数据，start表示有滑动了，就执行划出来那一页的方法end是在touchend之后，页面进行到了某一页，在执行那一夜要执行的方法,传null的话就不会执行回调了。如果不传，默认为滑动开始就执行
callback: {page0:h, page1: r, page2: t}, //每页要执行的回调函数，，格式必须为page1：function（）{}，page2：function（）{}，1,2代表的是页面的索引，从0开始 ...每页的数据加载完了的位置要加上touched.pagecomplete参数
iscustomLoading: "yes", //表示是否开始自定义加载条，如果没有自定义的方法，请关闭（传yes以外的值，或者不要写这个属性）
customLoading: {start: start, loading: loading, success: success, fail: fail}, //iscustomLoading = yes的时候这里面的方法才会执行
});
});
//方法实例
//请在数据请求完成的ajax里面加上touched.pagecomplete = true；必须，否者无法监听到数据是否已经执行完毕 ，
function h() {
console.log("page0");
touched.pagecomplete = true
}
function r() {
console.log("page1");
}
function t() {
console.log("page2");
touched.status = 400;
touched.pagecomplete = true
}
function start($self, $nowPage) {
//isLoadingOrIsLoaded("", true, false)
}
function loading($self, $nowPage) {
console.log("wawdawdawdawdawdawd")
isLoadingOrIsLoaded("", true, false)
}
function success($self, $nowPage) {
if(touched.status == 400) {
setTimeout(function() {
isLoadingOrIsLoaded("数据加载失败", false, true)
}, 1000)
} else {
setTimeout(function() {
isLoadingOrIsLoaded("数据加载成功", false, true)
}, 1000)
}
}
function fail($self, $nowPage) {
setTimeout(function() {
isLoadingOrIsLoaded("数据加载超时", false, true)
}, 1000)
}
</script>
</body>
</html>