导航页样式，入库页样式，分页

components/Pagination.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="pagination">
+    <text :disabled="page <= 1" @click="gotoPage(page - 1)"><</text>
+    <text v-for="item in pages" :key="getItemKey(item)" :class="{ active: item === page, ellipsis: item === '...' }" @click="gotoPage(item)">{{ item }}</text>
+    <text :disabled="page >= totalPages" @click="gotoPage(page + 1)">></text>
+  </view>
+</template>
+ 
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: { // 总条目数
+      type: Number,
+      required: true
+    },
+    pageSize: { // 每页显示的条目数
+      type: Number,
+      default: 10
+    },
+    currentPage: { // 当前页码
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    totalPages() { // 总页数
+      return Math.ceil(this.total / this.pageSize)
+    },
+    page() { // 当前页码，限定在 1 和总页数之间
+      return Math.max(1, Math.min(this.currentPage, this.totalPages))
+    },
+    pages() { // 可点击的页码数组，最多显示 5 个页码
+      const arr = []
+      let start = Math.max(this.page - 2, 1)
+      let end = Math.min(start + 4, this.totalPages)
+      if (end - start < 4) {
+        end = Math.min(start + 4, this.totalPages)
+        start = Math.max(end - 4, 1)
+      }
+      for (let i = start; i <= end; i++) {
+        arr.push(i)
+      }
+      if (end < this.totalPages) {
+        arr.push('...', this.totalPages)
+      }
+      return arr
+    }
+  },
+  methods: {
+    getItemKey(item) { // 获取项的 key
+      return typeof item === 'number' ? item.toString() : item
+    },
+    gotoPage(page) { // 跳转到指定页码
+      if (page > 0 && page <= this.totalPages) {
+        this.$emit('page-change', page)
+      }
+    }
+  }
+}
+</script>
+ 
+<style lang="stylus" scoped>
+@import '@/common/style/mixin.styl';
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;;
+  margin-top: 40rpx;
+}
+text {
+  display: inline-block;
+  padding: 0 20rpx;
+  background-color: #fff;
+  border: 2rpx solid #ddd;
+  border-radius: 6rpx;
+  margin-right: 20rpx;
+  _font(30rpx, 70rpx, #053978,,)
+}
+ 
+text.active {
+  background-color: #053978;
+  color: #fff;
+}
+ 
+text.ellipsis {
+  cursor: default;
+}
+</style>