下拉頂部重新整理簡單實現

2022-05-11 23:35:09 字數 2317 閱讀 4541

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

meta

id="viewport"

name

="viewport"

content

="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"

/>

6<

title

>下拉頂部重新整理

title

>

7<

style

>

8#slidedown

9#slidedown1,#slidedown2

10#slidedown1

11#slidedown1>p,#slidedown2>p

12style

>

13head

>

14<

body

>

15<

div

id="content"

>

16<

div

id="slidedown"

>

17<

div

id="slidedown1"

>

18<

p>鬆開重新整理

p>

19div

>

20<

div

id="slidedown2"

>

21<

p>正在重新整理 ...

p>

22div

>

23div

>

24<

div

class

="mycontent"

>

25<

ul>

26<

li>item1 -- item1 -- item1

li>

27<

li>item2 -- item2 -- item2

li>

28<

li>item3 -- item3 -- item3

li>

29<

li>item4 -- item4 -- item4

li>

30<

li>item5 -- item5 -- item5

li>

31<

li>item6 -- item6 -- item6

li>

32<

li>item7 -- item7 -- item7

li>

33ul

>

34div

>

35div

>

36<

script

>

37//

第一步:下拉過程

38function

slidedownstep1(dist)

45//

第二步:下拉,然後鬆開,

46function

slidedownstep2()

55//

第三步:重新整理完成,回歸之前狀態

56function

slidedownstep3()

6263

//下滑重新整理呼叫

64k_touch(

"content",

"y");

65//

contentid表示對其進行事件繫結,way==>x表示水平方向的操作,y表示豎直方向的操作

66function

k_touch(contentid,way)

else82}

83function

touchmove(event)

else93}

9495}96

function

touchend(event)

else

,2500

);107

}108

}109

}110

111script

>

112body

>

113html

>

RecyclerView頂部重新整理實現詳解

recyclerview頂部重新整理的實現通常都是在recyclerview外部再包裹一層布局。在這個外層布局中,還包含乙個自定義的view,作為頂部重新整理時的指示view。也就是說,外層布局中包含兩個child,乙個頂部重新整理view,乙個recyclerview,頂部重新整理view預設是隱...

下拉重新整理 WEUI下拉重新整理

最近在做手機版使用到了下拉重新整理和滾動載入,記錄一下實現過程 一 引入檔案12 34 二 頁面布局12 3456 78910 1112 1314 1516 1718 19 下拉重新整理 釋放重新整理 正在重新整理 正在載入 三 js部分12 3456 78910 1112 1314 1516 17...

UITableView實現下拉重新整理

uirefreshconteol類是實現下拉重新整理的控制項,並且uitableview有refreshcontrol的屬性。定義 uirefreshcontrol control uirefresh alloc init 下拉重新整理時顯示的文字 control.attributedtitle n...