vue 移动端 封装分页插件

分页插件在手机移动端很常见，插件很多，但是因为分页需求不同，所以先选择什么插件也是一个纠结的问题。但是分页插件的核心思路是大同小异的，与其老是用别人的东西，不如自己写一个来的实在。

本项目技术栈：vue   vuex  less 

效果图如下：

功能思路：

1.开始显示总条数和第一页

2.上一页和下一页跳转

3.输入框输入页数跳转到该页

好，看代码：

<template>
<div id="pagination" :style="{'justify-content':textAlign}">
    <div>
        <div>
            <span class="pages">共 {{allCounts}} 条</span>
        </div>
        <div>
            <button @click="reducePage"  class="btn">﹤</button>
            <span class="btn currentPage">{{currentPage}}</span>
            <button @click="addPage" class="btn">﹥</button>
        </div>
        <div class="select">
            <span>跳至</span>
            <input @keyup.enter="keyUp" type="number" v-model="page">
            <span>页</span>
        </div>
    </div>

</div>
 <!-- props  align 居中 左对齐  右对齐
        allCounts  总条数
        counts 每页显示多少条


 methods  change 翻页，传两个参数，一个是当前页码数，一个是BOOLEAN true（可根据此判断是否为翻页）
          enter  跳转  传一个参数，跳往哪一页 -->
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      page: 1
    };
  },
  props: {
    //布局
    align: {
      type: String,
      default: "center"
    },
    //总条数
    allCounts: {
      type: Number,
      default: 10
    },
    //每页显示条数
    counts: {
      type: Number,
      default: 10
    },

  },
  methods: {
    addPage() {
      if (this.currentPage < this.pages) {
        new Promise((resolve, reject) => {
          this.currentPage = ++this.currentPage;
          resolve();
        }).then(() => {
          this.$emit("change", this.currentPage,true);
        });
      } else {
        this.currentPage = this.currentPage;
        return;
      }
    },
    reducePage() {
      if (this.currentPage > 1) {
        new Promise((resolve, reject) => {
          this.currentPage = --this.currentPage;
          resolve();
        }).then(() => {
          this.$emit("change", this.currentPage,true);
        });
      } else {
        this.currentPage = this.currentPage;
        return;
      }
    },
    // enter事件
    keyUp() {
      new Promise((resolve, reject) => {
        if (this.page >= 1 && this.page <= this.pages) {
          this.page = this.page;
        } else if (this.page < 1) {
          this.page = 1;
        } else if (this.page > this.pages) {
          this.page = this.pages;
        }
        this.currentPage = this.page;
        resolve();
      }).then(() => {
        this.$emit("enter", Number(this.page));
      });
    },

  },
  computed: {
    textAlign() {
      switch (this.align) {
        case "left":
          return "flex-start";
          break;
        case "right":
          return "flex-end";
          break;
        default:
          return "center";
      }
    },
    //总页数
    pages() {
      return Math.ceil(this.allCounts / this.counts);
    }
  }
};
</script>

<style lang="less">  // css使用的less
@import url("../../../static/css/common.less");
@font: 16px;
//按键宽度
@width: 0.6rem;
// 按键边框
.btn-border {
  border: 1px solid #7d7d7d;
  border-radius: 4px;
}
#pagination {
  width: 100%;
  font-size: @font;
  display: flex;
  padding: 0.1rem 0;
  div {
    display: flex;
    span {
      display: block;
      .my-display(center;
            center);
    }
    .pages {
      margin: 0 0.2rem;
    }
    .btn {
      width: @width;
      height: @width;
      .btn-border;
      margin: 0 0.1rem;
      .my-display(center;
            center);
      &:active{
        background: #999
      }
    }
    .currentPage {
      background: #2b2c30;
      color: #fff;
    }
    .select {
      margin: 0 0.1rem;
      input[type="number"] {
        display: block;
        width: 1rem;
        height: @width;
        margin: 0 0.1rem;
        text-align: center;
        .btn-border;
      }
    }
  }
}
</style>

以上代码是一个完整的vue组建额，可以全部复制直接使用。

引用说明：

<template>
	<div class="loginLog">
		<yd-navbar title="登入记录">
			<router-link to="/home" slot="left">
				<yd-navbar-back-icon></yd-navbar-back-icon>
			</router-link>
		</yd-navbar>
		<div class="list">
				<div v-for="(item,index) in list" class="list-item" :key="index">
				    <p><span>IP地址 &nbsp;&nbsp;</span>:<span > {{item.ip}}</span></p>
						<p><span>登陆时间</span>:<span> {{item.loginTime}}</span></p>
						<p><span>登陆地区</span>:<span > {{item.address=="nullnullnullnull"?"内网ip":item.address}}</span></p>
				</div>
		</div>
		<Pagination class="pagination" align="right" :allCounts="countAll" @change="_queryLoginInfo" @enter="_queryLoginInfo"></Pagination>
	</div>
</template>

<script>
  import { mapState, mapActions, mapMutations } from "vuex";
  import Pagination from '../../common/pagination'
	export default {
		data(){
			return {
				list:[],
        countAll:0
			}
		},
    created(){
      this._queryLoginInfo(1)
		},
    components:{
      Pagination
    },
    methods:{
      ...mapActions([
        'queryLoginInfo'
          ]),
      ...mapMutations([
        'queryLoginInfoList'
      ]),
      _queryLoginInfo(page){
        let that = this;
        this.queryLoginInfo({
          page: page
        }).then((res) => {
          that.list = res.data.memberLoginInfoList;
          that.countAll = res.data.countAll;
        })
      }
    }
	}
</script>

1.引入分页组件

2.注册

3.调用并绑定事件传值

好了，你直接复制组件代码然后根据下使用说明应该是可以使用这个分页组件的。小生技术生浅，如有不合理之处，欢迎各位大牛指教。