hml5 自定義滑動控件

ys_scroll.css

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

<code>.ys-scroll-wrapper{</code>

<code>    </code><code>position</code><code>:</code><code>relative</code><code>;</code>

<code>    </code><code>overflow</code><code>: </code><code>auto</code><code>;</code>

<code>    </code><code>-webkit-overflow-scrolling: touch;</code>

<code>}</code>

<code>.ys-scroll-wrapper .ys-scroll-content{</code>

<code>    </code><code>min-height</code><code>:</code><code>100%</code><code>;</code>

<code>/* loading-top */</code>

<code>.ys-scroll-wrapper .loading-</code><code>top</code> <code>{</code>

<code>    </code><code>display</code><code>:</code><code>block</code><code>;</code>

<code>    </code><code>width</code><code>:</code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>40px</code><code>;</code>

<code>    </code><code>line-height</code><code>: </code><code>40px</code><code>;</code>

<code>    </code><code>text-align</code><code>: </code><code>center</code><code>;</code>

<code>/* loading-bottom */</code>

<code>.ys-scroll-wrapper .loading-</code><code>bottom</code> <code>{</code>

<code>.ys-scroll-wrapper .loading-end {</code>

<code>    </code><code>display</code><code>:</code><code>none</code><code>;</code>

ys_scroll.js

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

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

<code>(</code><code>function</code><code>($){</code>

<code>    </code><code>var</code> <code>defaultSettings = {</code>

<code>        </code><code>hasArrivedEnd:</code><code>false</code><code>,</code><code>// 是否已經到底部</code>

<code>        </code><code>pulldownCallback:</code><code>function</code><code>(){ </code><code>// 下拉回調</code>

<code>            </code><code>console.log(</code><code>"pull down ... "</code><code>);</code>

<code>        </code><code>},</code>

<code>        </code><code>pullupCallback:</code><code>function</code><code>(){ </code><code>// 上拉回調</code>

<code>            </code><code>console.log(</code><code>"pull up ... "</code><code>);</code>

<code>        </code><code>}</code>

<code>    </code><code>};</code>

<code>    </code><code>function</code> <code>render(target,settings){</code>

<code>        </code><code>var</code> <code>container = target;</code>

<code>        </code><code>var</code> <code>childrenNode = $(container).children().remove();</code>

<code>        </code><code>$(container).addClass(</code><code>"ys-scroll-wrapper"</code><code>);</code>

<code>        </code><code>$(container).append(</code><code>"&lt;div class='loading-top'&gt;加載中...&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>$(container).append(</code><code>"&lt;div class='ys-scroll-content'&gt;&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>$(container).append(</code><code>"&lt;div class='loading-bottom'&gt;加載更多...&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>$(container).append(</code><code>"&lt;div class='loading-end'&gt;已經到底了&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>$(container).find(</code><code>".ys-scroll-content"</code><code>).append(childrenNode);</code>

<code>        </code><code>$(container).scrollTop(LOADING_BAR_HEIGHT);</code>

<code>        </code><code>$(container).data(</code><code>"settings"</code><code>,settings);</code>

<code>        </code><code>return</code> <code>container;</code>

<code>    </code><code>}</code>

<code>    </code><code>function</code> <code>bindEventHandlers(target,container,settings){</code>

<code>        </code><code>var</code> <code>loadingTopRevertTimeout = </code><code>null</code><code>;</code>

<code>        </code><code>var</code> <code>loadingTopEndTimeout = </code><code>null</code><code>;</code>

<code>        </code><code>var</code> <code>loadingBottomRevertTimeout = </code><code>null</code><code>;</code>

<code>        </code><code>var</code> <code>loadingBottomTimeout = </code><code>null</code><code>;</code>

<code>        </code><code>var</code> <code>pulldownCallback = settings.pulldownCallback;</code>

<code>        </code><code>var</code> <code>pullupCallback = settings.pullupCallback;</code>

<code>        </code><code>function</code> <code>clearTimeouts(){</code>

<code>            </code><code>clearTimeout(loadingTopRevertTimeout);</code>

<code>            </code><code>clearTimeout(loadingTopEndTimeout);</code>

<code>            </code><code>clearTimeout(loadingBottomRevertTimeout);</code>

<code>            </code><code>clearTimeout(loadingBottomTimeout);</code>

<code>        </code><code>function</code> <code>scrollHandler(){</code>

<code>            </code><code>clearTimeouts();</code>

<code>            </code><code>var</code> <code>loadingTop = </code><code>false</code><code>;</code>

<code>            </code><code>if</code><code>(arriveLoadingTopStart(container)){</code>

<code>                </code><code>loadingTopRevertTimeout = setTimeout(</code><code>function</code><code>(){</code>

<code>                    </code><code>loadingTopRevert(container);</code>

<code>                </code><code>},RESPONSE_DELAY);</code>

<code>                </code><code>loadingTop = </code><code>true</code><code>;</code>

<code>            </code><code>}</code>

<code>            </code><code>if</code><code>(arriveLoadingTopEnd(container)){</code>

<code>                </code><code>clearTimeouts();</code>

<code>                </code><code>loadingTopEndTimeout = setTimeout(</code><code>function</code><code>(){</code>

<code>                    </code><code>resetLoading(container);</code>

<code>                    </code><code>pulldownCallback();</code>

<code>            </code><code>var</code> <code>hasArrivedEnd = $(container).data(</code><code>"settings"</code><code>).hasArrivedEnd;</code>

<code>            </code><code>if</code><code>(hasArrivedEnd||loadingTop){ </code><code>// 如果已經到底了不需要額外操作</code>

<code>                </code><code>return</code><code>;</code>

<code>            </code><code>if</code><code>(arriveLoadingBottomStart(container)){</code>

<code>                </code><code>loadingBottomRevertTimeout = setTimeout(</code><code>function</code><code>(){</code>

<code>                    </code><code>loadingBottomRevert(container);</code>

<code>            </code><code>if</code><code>(arriveLoadingBottomEnd(container)){</code>

<code>                </code><code>loadingBottomTimeout = setTimeout(</code><code>function</code><code>(){</code>

<code>                    </code><code>pullupCallback();</code>

<code>                </code><code>},RESPONSE_DELAY)</code>

<code>        </code><code>var</code> <code>hasPressed = </code><code>false</code><code>;</code>

<code>        </code><code>$(container).on(</code><code>"touchstart"</code><code>,</code><code>function</code><code>(event){</code>

<code>            </code><code>hasPressed = </code><code>true</code><code>;</code>

<code>            </code><code>stopAnimation(container);</code>

<code>        </code><code>});</code>

<code>        </code><code>$(container).on(</code><code>"touchmove"</code><code>,</code><code>function</code><code>(event){</code>

<code>            </code><code>var</code> <code>clientX = event.originalEvent.changedTouches[0].clientX;</code>

<code>            </code><code>var</code> <code>clientY = event.originalEvent.changedTouches[0].clientY;</code>

<code>            </code><code>if</code><code>(clientY&lt;0||clientX&lt;0){</code>

<code>                </code><code>scrollHandler();</code>

<code>        </code><code>$(container).on(</code><code>"touchend touchcancel"</code><code>,</code><code>function</code><code>(event){</code>

<code>            </code><code>scrollHandler();</code>

<code>            </code><code>hasPressed = </code><code>false</code><code>;</code>

<code>        </code><code>$(container).scroll(</code><code>function</code><code>(){</code>

<code>            </code><code>if</code><code>(hasPressed||reverting){</code>

<code>    </code><code>var</code> <code>RESPONSE_DELAY = 800; </code><code>// 觸發延遲</code>

<code>    </code><code>var</code> <code>ANIMATION_DURATION = 300; </code><code>// 動畫持續時間</code>

<code>    </code><code>var</code> <code>LOADING_BAR_HEIGHT = 40; </code><code>// loading bar 高度</code>

<code>    </code><code>var</code> <code>reverting = </code><code>false</code><code>; </code><code>// 動畫正在恢複</code>

<code>    </code><code>function</code> <code>stopAnimation(container){</code>

<code>        </code><code>$(container).stop(</code><code>true</code><code>);</code>

<code>        </code><code>reverting = </code><code>false</code><code>;</code>

<code>    </code><code>function</code> <code>loadingTopRevert(container){</code>

<code>        </code><code>reverting = </code><code>true</code><code>;</code>

<code>        </code><code>$(container).animate({</code>

<code>            </code><code>"scrollTop"</code><code>:LOADING_BAR_HEIGHT+</code><code>"px"</code>

<code>        </code><code>},ANIMATION_DURATION,</code><code>function</code><code>(){</code>

<code>            </code><code>reverting = </code><code>false</code><code>;</code>

<code>    </code><code>/* 判斷達到 Loading-top開始處 */</code>

<code>    </code><code>function</code> <code>arriveLoadingTopStart(container){</code>

<code>        </code><code>var</code> <code>scrollTop = $(container).scrollTop();</code>

<code>        </code><code>if</code><code>(scrollTop&lt;LOADING_BAR_HEIGHT){</code>

<code>            </code><code>return</code> <code>true</code><code>;</code>

<code>        </code><code>return</code> <code>false</code><code>;</code>

<code>    </code><code>/* 判斷達到 Loading-top結束處 */</code>

<code>    </code><code>function</code> <code>arriveLoadingTopEnd(container){</code>

<code>        </code><code>if</code> <code>(scrollTop&lt;1) {</code>

<code>    </code><code>function</code> <code>loadingBottomRevert(container){</code>

<code>        </code><code>var</code> <code>clientHeight = $(container).height();</code>

<code>        </code><code>var</code> <code>scrollTop = $(container)[0].scrollHeight-LOADING_BAR_HEIGHT-clientHeight;</code>

<code>            </code><code>"scrollTop"</code><code>:scrollTop+</code><code>"px"</code>

<code>    </code><code>/* 判斷到達 Loading Bottom 開始處 */</code>

<code>    </code><code>function</code> <code>arriveLoadingBottomStart(container){</code>

<code>        </code><code>var</code> <code>scrollHeight = $(container)[0].scrollHeight;</code>

<code>        </code><code>if</code> <code>(scrollTop + clientHeight+LOADING_BAR_HEIGHT&gt;= scrollHeight) {</code>

<code>    </code><code>/* 判斷到達 Loading Bottom 結束處 */</code>

<code>    </code><code>function</code> <code>arriveLoadingBottomEnd(container){</code>

<code>        </code><code>if</code> <code>(scrollTop + clientHeight+1&gt; scrollHeight) {</code>

<code>    </code><code>/* 重設 loading */</code>

<code>    </code><code>function</code> <code>resetLoading(container){</code>

<code>        </code><code>$(container).data(</code><code>"settings"</code><code>).hasArrivedEnd=</code><code>false</code><code>;</code>

<code>        </code><code>$(container).find(</code><code>".loading-bottom"</code><code>).show();</code>

<code>        </code><code>$(container).find(</code><code>".loading-end"</code><code>).hide();</code>

<code>    </code><code>/* 設定loading end */</code>

<code>    </code><code>function</code> <code>setLoadingEnd(container){</code>

<code>        </code><code>$(container).data(</code><code>"settings"</code><code>).hasArrivedEnd=</code><code>true</code><code>;</code>

<code>        </code><code>$(container).find(</code><code>".loading-bottom"</code><code>).hide();</code>

<code>        </code><code>$(container).find(</code><code>".loading-end"</code><code>).show();</code>

<code>    </code><code>var</code> <code>options = {</code>

<code>        </code><code>ysScroll:</code><code>function</code><code>(settings) {</code>

<code>            </code><code>var</code> <code>mergedSettings = {};</code>

<code>            </code><code>$.extend(mergedSettings,defaultSettings,settings);</code>

<code>            </code><code>$(</code><code>this</code><code>).each(</code><code>function</code><code>(){</code>

<code>                </code><code>var</code> <code>container = render(</code><code>this</code><code>,settings);</code>

<code>                </code><code>$(container).data(</code><code>"settings"</code><code>,settings);</code>

<code>                </code><code>bindEventHandlers(</code><code>this</code><code>,container,mergedSettings);</code>

<code>            </code><code>});</code>

<code>        </code><code>ysScrollRefresh:</code><code>function</code><code>(){</code>

<code>            </code><code>if</code><code>(arriveLoadingTopStart(</code><code>this</code><code>)){</code>

<code>                </code><code>loadingTopRevert(</code><code>this</code><code>);</code>

<code>            </code><code>if</code><code>(arriveLoadingBottomStart(</code><code>this</code><code>)){</code>

<code>                </code><code>loadingBottomRevert(</code><code>this</code><code>);</code>

<code>        </code><code>ysScrollLoadEnd:</code><code>function</code><code>(){</code>

<code>            </code><code>setLoadingEnd(</code><code>this</code><code>);</code>

<code>    </code><code>$.fn.extend(options);</code>

<code>})(jQuery);</code>

測試頁面 scroll.html

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;</code>

<code>&lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;</code>

<code>&lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;</code>

<code>&lt;!--[if gt IE 8]&gt;&lt;!--&gt;</code> <code>&lt;</code><code>html</code> <code>class</code><code>=</code><code>"no-js"</code><code>&gt; </code><code>&lt;!--&lt;![endif]--&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"X-UA-Compatible"</code> <code>content</code><code>=</code><code>"IE=edge,chrome=1"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"description"</code> <code>content</code><code>=</code><code>""</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"format-detection"</code> <code>content</code><code>=</code><code>"telephone=no"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"css/common/ys_scroll.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>style</code><code>&gt;</code>

<code>        </code><code>html,body,.container{</code>

<code>            </code><code>height:100%;</code>

<code>            </code><code>margin:0;</code>

<code>            </code><code>padding:0;</code>

<code>    </code><code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"container"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>ul</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>li</code><code>&gt;這是測試資料...&lt;/</code><code>li</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>ul</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"dist/js/jquery-1.11.3.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/common/ys_scroll.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code><code>&gt;</code>

<code>    </code><code>var dataHtml = $(".container ul").html();</code>

<code>    </code><code>$(".container ").ysScroll({</code>

<code>        </code><code>pulldownCallback:function(){ // 下拉回調</code>

<code>            </code><code>console.log("pull down ... ");</code>

<code>            </code><code>$(".container ul").html(dataHtml);</code>

<code>            </code><code>$(".container ").ysScrollRefresh();</code>

<code>        </code><code>pullupCallback:function(){ // 上拉回調</code>

<code>            </code><code>console.log("pull up ... ");</code>

<code>            </code><code>$(".container  ul").append(dataHtml);</code>

<code>    </code><code>});</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

注:容器使用前要給其設定一個固定的高度。當觸發pulldownCallback,pullupCallback回調後一定要使用$(".container").ysScrollRefresh();重置容器。

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1844427