增加分页

components/pagination/pagination.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="zb-pagination">
+    <view class="item-total" v-if="layout.includes('total')">共{{total}}条</view>
     <view class="item__left">
       <view class="first-page"
             v-if="layout.includes('first')"
@@ -13,16 +14,16 @@
     <view class="item__center">
       <text class="currentInnerPage">{{ currentInnerPage }}</text>
       <text>/</text>
-      <text>{{this.total}}</text>
+      <text>{{this.pageNumber}}</text>
     </view>
     <view class="item__right">
       <view class="next-page"
             v-if="layout.includes('next')"
             @click="btnOperation('next')"
-            :class="{disabled:currentInnerPage==total}">{{ nextText }}</view>
+            :class="{disabled:currentInnerPage==pageNumber}">{{ nextText }}</view>
       <view class="last-page"
             v-if="layout.includes('last')"
-            :class="{disabled:currentInnerPage==total}"
+            :class="{disabled:currentInnerPage==pageNumber}"
             @click="btnOperation('last')">尾页</view>
     </view>
 	</view>
@@ -35,6 +36,10 @@
         type:Number,
         default:0
       },
+      pageSize:{
+        type:Number,
+        default:10
+      },
       prevText:{
         type:String,
         default:'上一页'
@@ -51,10 +56,23 @@
         type:String,
         default:'下一页'
       }
+    },
+    computed:{
+	    pageNumber(){
+	      return Math.ceil(this.total/this.pageSize)
+      },
+    },
+    watch:{
+      currentPage:{
+        handler(val){
+          this.currentInnerPage = val
+        },
+        immediate:true
+      }
     },
 		data() {
 			return {
-        currentInnerPage:this.currentPage,
+        currentInnerPage:1,
         isDisabled:false
 			}
 		},
@@ -63,23 +81,23 @@
         switch (type) {
           case 'first':
             this.currentInnerPage = 1
-              this.$emit('current-change',this.currentInnerPage)
+              this.$emit('current-change',this.currentInnerPage,type)
             break;
           case 'prev':
-            if(this.currentInnerPage==1){
+            if(this.pageNumber==1){
               return false
             }
             this.currentInnerPage--
-            this.$emit('current-change',this.currentInnerPage)
+            this.$emit('current-change',this.currentInnerPage,type)
             break;
           case 'next':
-              if(this.currentInnerPage==this.total){return false}
+              if(this.currentInnerPage==this.pageNumber){return false}
               this.currentInnerPage++
-            this.$emit('current-change',this.currentInnerPage)
+            this.$emit('current-change',this.currentInnerPage,type)
             break;
           case 'last':
-            this.currentInnerPage = this.total
-            this.$emit('current-change',this.currentInnerPage)
+            this.currentInnerPage = this.pageNumber
+            this.$emit('current-change',this.currentInnerPage,type)
             break;
         }
       }
@@ -91,7 +109,13 @@
 .zb-pagination{
   display: flex;
   flex-direction: row;
-
+  .item-total{
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 4px;
+  }
   .item__left{
     display: flex;
     flex-direction: row;
@@ -112,19 +136,24 @@
   color: #007aff;
 }
 .first-page{
-  margin-right: 8px;
+  margin-right: 4px;
 }
 .last-page{
-  margin-left: 8px;
+  margin-left: 4px;
 }
 .first-page,
 .prev-page,
 .next-page,
 .last-page {
   cursor: pointer;
-  font-size: 27rpx;
-  // padding: 14rpx 25rpx;
-  padding: 8px 12px;
+  // font-size: 27rpx;
+  font-size: 13px;
+   // padding: 14rpx 25rpx;
+   // padding: 12rpx 22rpx;
+  padding: 4px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   box-sizing: border-box;
   background-color: #f8f8f8;
   border: 1px solid #e5e5e5;

components/pagination/readme.md

@@ -0,0 +1,22 @@
+## 介绍
+基于uni-app开发的一个分页组件
+
+
+## qq群 731805264
+## -- github 永远保持最新，有啥想法的可以提PR,共同开发 [地址](https://github.com/zouzhibin/vue-admin-perfect)
+
+## drawer属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
+| ------ | ------ | ------ | ------ | ------ |------ |
+| total | 总条目数 | number | -- | -- |是|
+| page-size | 每页显示条目个数 | number | -- | 10|否|
+| current-page | 当前页数 | number | -- | 1|否|
+| layout | 组件布局，子组件名用逗号分隔 | string | total,first,prev,next,last| first,prev,next,last|否|
+| prevText | 上一页文字 | string | -- | 上一页|否|
+| nextText | 下一页文字 | string | -- | 下一页|否|
+
+
+## 事件
+|事件名称 | 说明 | 参数|
+| ------ | ------ | ------ |
+| current-change | currentPage 改变时会触发 | 当前页|