增加分页

2022-04-13 17:57:50 +08:00
parent ef9f7673dd
commit 1cd9c104e4
4 changed files with 194 additions and 7 deletions
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,12 +2,9 @@
 <project version="4">
  <component name="ChangeListManager">
    <list default="true" id="be7958c3-0d1c-4f74-a433-b590462e7034" name="Default Changelist" comment="修改 回显问题">
+      <change afterPath="$PROJECT_DIR$/components/pagination/pagination.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map" beforeDir="false" afterPath="$PROJECT_DIR$/unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/unpackage/dist/dev/mp-alipay/app.json" beforeDir="false" afterPath="$PROJECT_DIR$/unpackage/dist/dev/mp-alipay/app.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/unpackage/dist/dev/mp-weixin/app.json" beforeDir="false" afterPath="$PROJECT_DIR$/unpackage/dist/dev/mp-weixin/app.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/unpackage/dist/dev/mp-weixin/common/vendor.js" beforeDir="false" afterPath="$PROJECT_DIR$/unpackage/dist/dev/mp-weixin/common/vendor.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/unpackage/dist/dev/mp-weixin/project.config.json" beforeDir="false" afterPath="$PROJECT_DIR$/unpackage/dist/dev/mp-weixin/project.config.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages.json" beforeDir="false" afterPath="$PROJECT_DIR$/pages.json" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -32,12 +29,18 @@
    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/components/pagination" />
    <property name="node.js.detected.package.eslint" value="true" />
    <property name="node.js.detected.package.tslint" value="true" />
    <property name="node.js.selected.package.eslint" value="(autodetect)" />
    <property name="node.js.selected.package.tslint" value="(autodetect)" />
    <property name="vue.rearranger.settings.migration" value="true" />
  </component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="E:\dingw\pr2\zzb-table\components\pagination" />
+    </key>
+  </component>
  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="false" />
  <component name="SvnConfiguration">
    <configuration />
--- a/components/pagination/pagination.vue
+++ b/components/pagination/pagination.vue
@@ -0,0 +1,145 @@
+<template>
+	<view class="zb-pagination">
+    <view class="item__left">
+      <view class="first-page"
+            v-if="layout.includes('first')"
+            :class="{disabled:currentInnerPage==1}"
+            @click="btnOperation('first')">首页</view>
+      <view class="prev-page"
+            v-if="layout.includes('prev')"
+            :class="{disabled:currentInnerPage==1}"
+            @click="btnOperation('prev')">{{ prevText }}</view>
+    </view>
+    <view class="item__center">
+      <text class="currentInnerPage">{{ currentInnerPage }}</text>
+      <text>/</text>
+      <text>{{this.total}}</text>
+    </view>
+    <view class="item__right">
+      <view class="next-page"
+            v-if="layout.includes('next')"
+            @click="btnOperation('next')"
+            :class="{disabled:currentInnerPage==total}">{{ nextText }}</view>
+      <view class="last-page"
+            v-if="layout.includes('last')"
+            :class="{disabled:currentInnerPage==total}"
+            @click="btnOperation('last')">尾页</view>
+    </view>
+	</view>
+</template>
+
+<script>
+	export default {
+	  props:{
+      total:{
+        type:Number,
+        default:0
+      },
+      prevText:{
+        type:String,
+        default:'上一页'
+      },
+      currentPage:{
+        type:Number,
+        default:1
+      },
+      layout: {
+        type:String,
+        default:'first,prev,next,last'
+      },
+      nextText:{
+        type:String,
+        default:'下一页'
+      }
+    },
+		data() {
+			return {
+        currentInnerPage:this.currentPage,
+        isDisabled:false
+			}
+		},
+		methods: {
+      btnOperation(type){
+        switch (type) {
+          case 'first':
+            this.currentInnerPage = 1
+              this.$emit('current-change',this.currentInnerPage)
+            break;
+          case 'prev':
+            if(this.currentInnerPage==1){
+              return false
+            }
+            this.currentInnerPage--
+            this.$emit('current-change',this.currentInnerPage)
+            break;
+          case 'next':
+              if(this.currentInnerPage==this.total){return false}
+              this.currentInnerPage++
+            this.$emit('current-change',this.currentInnerPage)
+            break;
+          case 'last':
+            this.currentInnerPage = this.total
+            this.$emit('current-change',this.currentInnerPage)
+            break;
+        }
+      }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.zb-pagination{
+  display: flex;
+  flex-direction: row;
+
+  .item__left{
+    display: flex;
+    flex-direction: row;
+  }
+  .item__center{
+    flex: 1;
+	 display: flex;
+	 flex-direction: row;
+	 justify-content: center;
+	 align-items: center;
+  }
+  .item__right{
+    display: flex;
+    flex-direction: row;
+  }
+}
+.currentInnerPage{
+  color: #007aff;
+}
+.first-page{
+  margin-right: 8px;
+}
+.last-page{
+  margin-left: 8px;
+}
+.first-page,
+.prev-page,
+.next-page,
+.last-page {
+  cursor: pointer;
+  font-size: 27rpx;
+  // padding: 14rpx 25rpx;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+  border: 1px solid #e5e5e5;
+  white-space: nowrap;
+
+}
+.first-page:active,
+.prev-page:active,
+.next-page:active,
+.last-page:active {
+  opacity: 0.6;
+
+}
+.disabled{
+  pointer-events: none;
+  opacity: 0.5;
+}
+</style>
--- a/pages.json
+++ b/pages.json
@@ -1,7 +1,7 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/index",
+			"path": "pages/pagination/pagination",
 			"style": {
 				"navigationBarTitleText": "uni-app"
 			}
@@ -12,7 +12,16 @@
 				"navigationBarTitleText": "table"
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/pagination/pagination",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
--- a/pages/pagination/pagination.vue
+++ b/pages/pagination/pagination.vue
@@ -0,0 +1,30 @@
+<template>
+	<view class="zb-pagination">
+    <zb-pagination
+        :current-page="2"
+        :total="5" @current-change="handleCurrentChange"/>
+	</view>
+</template>
+
+<script>
+import ZbPagination from '../../components/pagination/pagination'
+	export default {
+    components:{
+      ZbPagination
+    },
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+      handleCurrentChange(val){
+        console.log(`当前页: ${val}`);
+      }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>