-
Notifications
You must be signed in to change notification settings - Fork 0
/
01-BScroll的基本使用.html
155 lines (150 loc) · 4.41 KB
/
01-BScroll的基本使用.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
height: 200px;
background-color: brown;
overflow: hidden;
}
</style>
</head>
<body>
<div class="content">
<ul>
<button class="btn">按钮</button>
<li>列表符号1</li>
<li>列表符号2</li>
<li>列表符号3</li>
<li>列表符号4</li>
<li>列表符号5</li>
<li>列表符号6</li>
<li>列表符号7</li>
<li>列表符号8</li>
<li>列表符号9</li>
<li>列表符号10</li>
<li>列表符号11</li>
<li>列表符号12</li>
<li>列表符号13</li>
<li>列表符号14</li>
<li>列表符号15</li>
<li>列表符号16</li>
<li>列表符号17</li>
<li>列表符号18</li>
<li>列表符号19</li>
<li>列表符号20</li>
<li>列表符号21</li>
<li>列表符号22</li>
<li>列表符号23</li>
<li>列表符号24</li>
<li>列表符号25</li>
<li>列表符号26</li>
<li>列表符号27</li>
<li>列表符号28</li>
<li>列表符号29</li>
<li>列表符号30</li>
<li>列表符号31</li>
<li>列表符号32</li>
<li>列表符号33</li>
<li>列表符号34</li>
<li>列表符号35</li>
<li>列表符号36</li>
<li>列表符号37</li>
<li>列表符号38</li>
<li>列表符号39</li>
<li>列表符号40</li>
<li>列表符号41</li>
<li>列表符号42</li>
<li>列表符号43</li>
<li>列表符号44</li>
<li>列表符号45</li>
<li>列表符号46</li>
<li>列表符号47</li>
<li>列表符号48</li>
<li>列表符号49</li>
<li>列表符号50</li>
<li>列表符号51</li>
<li>列表符号52</li>
<li>列表符号53</li>
<li>列表符号54</li>
<li>列表符号55</li>
<li>列表符号56</li>
<li>列表符号57</li>
<li>列表符号58</li>
<li>列表符号59</li>
<li>列表符号60</li>
<li>列表符号61</li>
<li>列表符号62</li>
<li>列表符号63</li>
<li>列表符号64</li>
<li>列表符号65</li>
<li>列表符号66</li>
<li>列表符号67</li>
<li>列表符号68</li>
<li>列表符号69</li>
<li>列表符号70</li>
<li>列表符号71</li>
<li>列表符号72</li>
<li>列表符号73</li>
<li>列表符号74</li>
<li>列表符号75</li>
<li>列表符号76</li>
<li>列表符号77</li>
<li>列表符号78</li>
<li>列表符号79</li>
<li>列表符号80</li>
<li>列表符号81</li>
<li>列表符号82</li>
<li>列表符号83</li>
<li>列表符号84</li>
<li>列表符号85</li>
<li>列表符号86</li>
<li>列表符号87</li>
<li>列表符号88</li>
<li>列表符号89</li>
<li>列表符号90</li>
<li>列表符号91</li>
<li>列表符号92</li>
<li>列表符号93</li>
<li>列表符号94</li>
<li>列表符号95</li>
<li>列表符号96</li>
<li>列表符号97</li>
<li>列表符号98</li>
<li>列表符号99</li>
<li>列表符号100</li>
</ul>
</div>
<script src="./bscroll.js"></script>
<script>
// 默认情况BScroll是不可以实时监听滚动位置
// probe 侦测
// 0,1 都是不侦测实时的位置
// 2 手指滚动过程中侦测，手指离开后的惯性不侦测
// 3 只要滚动，都侦测
const bscroll = new BScroll(document.querySelector('.content'), {
probeType: 3,
click: true,
pullUpLoad: true
})
bscroll.on('scroll', (position) => {
// console.log(position);
})
bscroll.on('pullingUp', () => {
console.log('上拉加载更多');
// 发送网络请求，请求更多页的数据
// 等数据请求完成，并且将新的数据展示出来后
setTimeout(() => {
bscroll.finishPullUp()
}, 2000)
})
document.querySelector('.btn').addEventListener('click', function () {
console.log('--------')
})
</script>
</body>
</html>