首頁 > web前端 > js教程 > 原生js實作可以帶有上下翻頁的翻頁功能(程式碼)

原生js實作可以帶有上下翻頁的翻頁功能(程式碼)

不言
發布: 2018-08-15 16:13:43
原創
6608 人瀏覽過

這篇文章帶給大家的內容是關於原生js實作可以帶上下翻頁的翻頁功能(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

翻頁功能在渲染資料時常用到,以下是使用原生JS去實作的一個翻頁功能,上下翻頁功能,效果圖如下:

主要步驟/想法:

  1. 實現頁面效果;

  2. #點擊頁碼時,根據情況判斷,控制翻頁變化,有以下幾種情況:

      (a).總頁數> 限制頁數  =》有10頁,限制每次只顯示5頁

(a).總頁數= 限制頁數  =》只回傳1頁,顯示每次只顯示5頁

      (a).總頁數< 限制頁數  =》回傳的總頁數和每次顯示的頁數是相同的

    3. 上下翻頁功能,根據翻頁情況,第一頁和最後一頁時,應該移除翻頁的功能等;

頁面效果實作:

html

1

2

3

4

5

<div class="pagination">

    <a href="javascript:;"  class="page-pre">上一页</a>

    <ul></ul>

    <a href="javascript:;" class="page-next">下一页</a>

</div>

登入後複製

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

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

/** 分页 */

.pagination{

    display: inline-block;

}

.pagination>ul{

    padding: 0;

    margin: 0;

    display: inline-block;

    border: 1px solid #e2e2e2;

}

.pagination>ul>li{

    float: left;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #e2e2e2;

}

.pagination>ul>li:first-child{

    background-color: rgb(30, 159, 255);

}

.pagination>ul>li:last-child{

    border-right-width: 0px;

}

.pagination>ul>li>a{

    display: inline-block;

    width: 38px;

    height: 30px;

    line-height: 30px;

    text-align: center;

    color: #333;

}

.pagination>ul>li>a:hover{

    opacity: 0.7;

}

.pagination>a{

    display: inline-block;

    width: 50px;

    height: 30px;

    line-height: 30px;

    text-align: center;

    color: #333;

    border: 1px solid #e2e2e2;

}

.pagination a.page-pre{

    margin-right: -1px;

    float: left;

    color: #d2d2d2;

    cursor: not-allowed;

    border-right-width: 0px;   

}

.pagination a.page-next{

    float: right;

    border-left-width: 0px;

}

/* 分页 end **/

登入後複製

實作翻頁效果

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

var pagination = function (o){

    /**

     * 翻页会出现的情况:

     * 总页数 > 限制页数  30 > 10

     * 总页数 < 限制页数  5 < 10

     * 总页数 = 限制页数  10 = 10

     * @var pnCount - 显示多少页码 =>  限制显示页码 < 页码总数 (按限制显示) : 限制显示页码 > 页码总数 (按页码总数显示)

     * @var midN - 翻页的中间页码位置

     *

    */

    var config = {

        count: o.count || 10,

        limit: o.limit || 5, //每页显示的条数

    };

    var count = config.count,

        limit = config.limit,

        eUl = dorea(".pagination ul")[0],

        ePre = dorea(".pagination .page-pre")[0],

        eNext = dorea(".pagination .page-next")[0],

        eUlChild = eUl.children,

        pnCount = limit < count ? pnCount = limit : pnCount = count,

        midN = Math.ceil( pnCount / 2 );

    /* 初始化上下翻页的页码 */

    ePre.setAttribute("data-page","1");

    eNext.setAttribute("data-page","1"); 

     

    /*

        * @func renderPag

        * @desc 渲染分页 

        * @param { string } startN - 页码起始数 

        * @param { string } currP - 当前页数 ,初始化该函数时可不传 

        * @var childLen - 所有的子元素(页码)的长度

    */

    var renderPag = function (startN,currP){

        var childLen = eUlChild.length;

        /* 渲染前先清空所有页码 */

        for ( var d = childLen-1; d>=0; d-- ) {

            eUlChild[d].parentNode.removeChild(eUlChild[d]);

        }

        /* 渲染页码 */

        for ( var i = startN; i <pnCount+startN; i++ ) {

            var eLi = creatEle("li"),

                eA = creatEle("a");

            eA.innerHTML = i;

            eA.setAttribute("href","javascript:;");

            eLi.setAttribute("data-page",i);

            eLi.appendChild(eA);

            eUl.appendChild(eLi);

 

            /* 添加页码的点击事件,获取当前页码currPage */

            eLi.addEventListener("click",function (){

                var currPage = this.getAttribute("data-page");

                turnPag(currPage);

                ePre.setAttribute("data-page",currPage);

                eNext.setAttribute("data-page",currPage);

            });

        }

        /* 每次重新渲染翻页时,判断当前页情况(是否属于首页和尾页) */

        if (currP!==undefined) {

            if (currP=="1") {

                ePre.style.color = "#d2d2d2";

                ePre.style.cursor = "not-allowed";

                ePre.removeEventListener("click",preFn,false);

            }else if(currP==count){

                eNext.style.color = "#d2d2d2";

                eNext.style.cursor = "not-allowed";

                eNext.removeEventListener("click",nextFn,false);

            }else{

                ePre.style.color = "#333";

                ePre.style.cursor = "pointer";

                eNext.style.color = "#333";

                eNext.style.cursor = "pointer";

                ePre.addEventListener("click",preFn,false);

                eNext.addEventListener("click",nextFn,false);

            }

        }

    };

    /**

     * @func turnPag

     * @desc 翻页事件判断,主要用于点击事件发生后,进行页码渲染前的判断

     * @param { string } cp - 传入一个点击所获得的当前页数

     * 情况:1) count > limit

     *          a). limit的前半部分页码,例如 10,5 ,前半部分是 1,2 => 起始页为 1

     *          b). limit的后半部分页码,例如 10,5 ,后半部分是 9,10 => 起始页为 (count-limit)+1

     *          b). limit的中间部分,例如 10,5 ,中间部分是 4-7 => 起始页为 (当前页 - (limit/2))+1

     * 情况:2) count = limit => 起始页为 1

     * 情况:3) count < limit => 限制10条,但真实数据确只有5条

     *          a). 发生这类情况,限制条数应以总数据条数为准则

     *

    */

    var turnPag = function (cp){

        console.log("当前第 "+cp+" 页");

        if (count>limit) {

            if ( cp<=midN ) { //判断是否属于前部分

                renderPag(1,cp);

            }else if( cp<=count && cp>count - midN ){ //判断是否属于后部分

                renderPag( (count - limit)+1 ,cp) ;

            }else{

                renderPag( (cp-midN)+1 ,cp);

            }

        }else if (count===limit || count<limit) {

            renderPag(1);

        }else{

            renderPag( (count - midN)-1 ,cp);

        }

         

        for (var i = 0; i<eUlChild.length; i++) {

            eUlChild[i].style.backgroundColor = "#fff";

            if (eUlChild[i].getAttribute("data-page") == cp) {

                eUlChild[i].style.backgroundColor = "#1E9FFF"; /* 选中状态 */

            }

        }

    };

    /**

     * @func preFn

     * @desc 上翻页

     * @func nextFn

     * @desc 下翻页

     */

    var preFn = function (){

        var currPage = this.getAttribute("data-page");

        currPage--;

        turnPag(currPage);

        ePre.setAttribute("data-page",currPage);

        eNext.setAttribute("data-page",currPage);

    };

    var nextFn = function (){

        var currPage = this.getAttribute("data-page");                   

        currPage++;

        turnPag(currPage);

        ePre.setAttribute("data-page",currPage);

        eNext.setAttribute("data-page",currPage);

    };

    renderPag(1);

 

    /*

        * 初次渲染翻页时,判断当前的总页数情况,初始化翻页功能

        * 情况: 1) count > limit 上翻页:暗色,删除事件 - 下翻页:亮色,点击事件

        * 情况: 2) count = limit 上下翻页:暗色,删除事件

        * 情况: 3) count < limit 上下翻页:暗色,删除事件

    */

    if (count>limit) {

        ePre.style.color = "#d2d2d2";  

        ePre.style.cursor = "not-allowed";

        ePre.removeEventListener("click",preFn,false);

        eNext.addEventListener("click",nextFn,false);

    }else{

        ePre.style.color = "#d2d2d2";

        ePre.style.cursor = "not-allowed";

        ePre.removeEventListener("click",preFn,false);

        eNext.style.color = "#d2d2d2";

        eNext.style.cursor = "not-allowed";

        eNext.removeEventListener("click",nextFn,false);

    }

}

登入後複製

相關推薦:

#原生JS如何實作翻頁功能

js 拖曳翻頁實作程式碼_javascript技巧

Js實作網頁鍵盤控制翻頁的方法_javascript技巧

#

以上是原生js實作可以帶有上下翻頁的翻頁功能(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板