page

wuqiong · wuqiong · commit cdf36a682b49 · 2017-12-29T16:05:25.000+08:00
diff --git a/page.html b/page.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>分页</title>
+    <style>
+        body {
+            font-family: "Segoe UI";
+        }
+
+        li {
+            list-style: none;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        .pagination {
+            position: relative;
+        }
+
+        .pagination li {
+            display: inline-block;
+            margin: 0 5px;
+        }
+
+        .pagination li a {
+            padding: .5rem 1rem;
+            display: inline-block;
+            border: 1px solid #ddd;
+            background: #fff;
+
+            color: #0E90D2;
+        }
+
+        .pagination li a:hover {
+            background: #eee;
+        }
+
+        .pagination li.active a {
+            background: #0E90D2;
+            color: #fff;
+        }
+    </style>
+</head>
+
+<body>
+    <script type="text/x-template" id="page">
+        <ul class="pagination">
+            <li v-show="current != 1" @click="current-- && goto(current)">
+                <a href="#">上一页</a>
+            </li>
+            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
+                <a href="#">{{index}}</a>
+            </li>
+            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
+                <a href="#">下一页</a>
+            </li>
+        </ul>
+    </script>
+    <div id="app">
+        <page></page>
+    </div>
+    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
+    <script>
+        Vue.component("page", {
+            template: "#page",
+            data: function () {
+                return {
+                    current: 1, // 当前页码
+                    showItem: 5, // 最少显示5个页码
+                    allpage: 13 // 总共的
+                }
+            },
+            computed: {
+                pages: function () {
+                    var pag = [];
+                    if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
+                        //总页数和要显示的条数那个大就显示多少条
+                        var i = Math.min(this.showItem, this.allpage);
+                        while (i) {
+                            pag.unshift(i--);
+                        }
+                    } else { //当前页数大于显示页数了
+                        var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
+                            i = this.showItem;
+                        if (middle > (this.allpage - this.showItem)) {
+                            middle = (this.allpage - this.showItem) + 1
+                        }
+                        while (i--) {
+                            pag.push(middle++);
+                        }
+                    }
+                    return pag
+                }
+            },
+            methods: {
+                goto: function (index) {
+                    if (index == this.current) return;
+                    this.current = index;
+                    //这里可以发送ajax请求
+                }
+            }
+        })
+
+        var vm = new Vue({
+            el: '#app',
+        })
+    </script>
+</body>
+
+</html>
