Baiduの検索に似JSネイティブカスタムページングを制御し、

同様のBaiduの検索結果ページのスタイルを実現するために、スタイルは、ネイティブに近い、ごく一部のjQueryをカスタマイズすることができます。

エフェクトショット（任意のスタイルなしデフォルト）を達成するための1、

 

 図2に示すように、メイン・プログラム・コード

（関数（輸出、Module1のを必要とする）を定義する{ 
    / * 
    説明：カスタムページングコンポーネント
    OF：胡Zeyunの
    日：2019年1月6日
    * / 
    VAR指数= { 
        データ：{ 
            のpageSize：10、//あたりの個数
            の合計：100 、//ページの総数
            curPage：1、//ページ
            maxPageNum：図10の//数フィールドは
        } 
       //プログラムの初期化
        INIT：機能（オプション）{ 
            VARを= Meのこの; 
            me.option =オプション; 

            me.data = option.pageSize .pageSize; 
            me.data.total = option.total; 
            IF（option.maxPageNum）{ 
                me.data.maxPageNum = option.maxPageNum。
            } 
            Me.render（option.containerId）; // INIT containerIdはを通過しました

　　　　　　　　//me.bind（）。
         } 
        //进行渲染
        レンダリング：関数（containerIdは）{ 
            VAR HTML = "" 
            私はこの= VARを、
            VAR PAGENUM =恐らくMath.round（me.data.total / me.data.pageSize）。
            //取中间值
            VAR中老= me.data.maxPageNum / 2; 
            VAR beginPage = me.data.curPage -中老。
            VAR ENDPAGE = me.data.curPage +中老- 1。


            //开始边界处理
            （beginPage <= 0）であれば{ 
                beginPage = 1。
            } 

            IF（ENDPAGE <me.data.maxPageNum）{ 
                ENDPAGE + = me.data.maxPageNum - ENDPAGE。
            }
            //结束边界
            IF（ENDPAGE> = PAGENUM）{ 
                ENDPAGE = PAGENUM。
            } 

            にconsole.log（beginPage + "" + ENDPAGE）。
            用（VAR NUM = beginPage; NUM <= ENDPAGE; NUM ++）{ 

                IF（me.data.curPage == NUM）{ 
                    HTML + = "<スパン名= 'pageSpan'>" + NUM + "</スパン>"。
                } 
                他{ 
                    HTML + =「<名前= 'ページ'のhref = 'javascriptの:;' > "+ NUM +" </a>を「。
                } 
            } 
            //上一页下一页
            IF（beginPage> 1 && ENDPAGE <
                HTML =「<ID = 'prePage'のhref = 'javascriptの:;' >上一页</a>の"+ HTML + 
                 " <ID = 'NEXTPAGE'のhref = 'javascriptの:;' >下一页</a>を"; 
            } 
            他{ 
                IF（beginPage == 1）{ 
                    HTML + = "<ID = 'NEXTPAGE'のhref = 'javascriptの:;' >下一页</a>を"; 
                } 
                他（ENDPAGE == PAGENUM）{もし
                    HTML =「<ID = 'prePage'のhref = 'javascriptの:;' >上一页</a>の「+ HTML; 
                } 
            } 
            HTML + = "<DIV>总共：" + me.data.total + "条" + PAGENUM + "

            console.log（HTML）。
            //重新绑定事件
            me.bind（）; 
            （me.option.pageChange）であれば{ 
                // VAR beginRcordNum = me.data.curPage * this.option.pageSize。
                // VAR endRcordNum = beginRcordNum + this.option.pageSize。
                me.option.pageChange（{ 
                    curPage：me.data.curPage、
                    // beginRcordNum：beginRcordNum、
                    // endRcordNum：endRcordNum、
                    pageSizeを：me.data.pageSize 
                }）。
            } 

        }、
        バインド：関数（）{ 
            varが私はこれを=。
            //绑定点击クリック事件
            $（ "[名= 'ページ']"）各（関数（指数、OBJ）{。
                $（OBJ）.on（、 "クリック"機能（）{ 
                    VARのページ= $（OBJ）は.text（）; 
                    私を.data.curPage =のparseInt（ページ）; 
                    IF（me.option.containerId）{ 
                        me.render（me.option.containerId）; 
                    } 

                }）; 
            }）; 
            //上下页
            $（ "＃prePage"）（）（、機能を"クリック" {上。
                me.data.curPage--; 
                （me.option.containerId）{もし
                    me.render（me.option.containerId）。
            上の$（ "＃NEXTPAGE"）。（ "クリック"、機能（）{ 
                me.data.curPage ++; 
                （me.option.containerId）{もし
                    me.render（me.option.containerId）; 
                } 
            }）
        } 

    }; 
    輸出= module.exportsは=インデックス。
}）

 

　詳細コード   https://github.com/huzeyun/jspage/