自定义小程序分页组件

<!-- wxml分页组件 -->
<view class="page_div">
	<view class="page_sum">共{{pagetotal}}页 当前{{currentPage}}页</view>
	<view class="page_prev" bindtap="prevFn">上一页</view>
	<view class="page_number_div">
    <view class="pageGo" bindtap="prevFn" wx:if="{{currentPage>1}}">{{currentPage-1}}</view>
    <view class="pageGo active" bindtap="pageGo" >{{currentPage}}</view>
    <view class="pageGo" bindtap="nextFn"  wx:if="{{currentPage+1<=pagetotal}}">{{currentPage+1}}</view>
    <!-- <input value="{{currentPage}}" bindinput="inputValue" data-name="currentPage"></input> -->
		<!-- <view class="pageGo" bindtap="pageGo">Go</view> -->
	</view>
	<view class="page_next" bindtap="nextFn">下一页</view>
</view>

@import "../../scss/base";
/************分页样式****************/
.page_div {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  box-sizing: border-box;
  padding:20rpx;
  background-color: #fff;
}
.page_div .page_sum, .page_div .page_prev, .page_div .page_number_div, .page_div .page_next {
  height: 50rpx;
  line-height: 50rpx;
  font-size:24rpx;
  color: #333;
}
.page_div .page_prev, .page_div .page_next {
  background-color: #eee;
  padding:0 10rpx;
  margin:0 10rpx;
}
.page_div .page_number_div .pageGo {
  display: inline-block;
  vertical-align: middle;
  width: 50rpx;
  box-sizing: border-box;
  background-color: #eee;
  text-align: center;
  margin:0 10rpx;
}
.page_div .page_number_div input {
  width: 100rpx;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border:1px solid #eee;
}
.page_div .page_number_div .pageGo.active{
  background-color: #FEC00F!important;
}
/************分页样式结束************/

//js
Component({
  properties: {
    total:{
      type: Number,
      value:0
    },
    size:{
      type: Number,
      value:20
    },
    page:{
      type: Number,
      value:1
    }
  },

  data: {
    pageSize:20,
    pagetotal:0,
    currentPage:1

  },
  ready() {
    this.setData({
      pageSize:this.data.size,
      currentPage:this.data.page,
      pagetotal:Math.ceil(this.data.total/this.data.size)
    })
  },
  methods: {
    //input输入双向绑定数据
  inputValue:function(e){
    let name = e.currentTarget.dataset.name;
    let mapName ={};
    mapName[name]=e.detail && e.detail.value;
    this.setData(mapName);
  },
  //上一页
  prevFn:function(){
    if(this.data.currentPage <=1){
      wx.showToast({
        icon:'none',
        title: '已经是最前一页',
      })
      return;
    }

    // wx.showLoading({
    //   title: '加载中...',
    // })
    let currentPage = Number(this.data.currentPage)-1
    this.setData({
      currentPage
    })
    this.triggerEvent("pageChange", currentPage);
    // setTimeout(function(){
    //   wx.hideLoading()
    // },1000)
  },
  //下一页
  nextFn:function(){
    if(this.data.currentPage >= this.data.pagetotal){
      wx.showToast({
        icon:'none',
        title: '已经是最后一页',
      })
      return;
    }
    // wx.showLoading({
    //   title: '加载中...',
    // })
    let currentPage = Number(this.data.currentPage)+1
    this.setData({
      currentPage
    })
    console.log(this.data.currentPage);
    this.triggerEvent("pageChange", currentPage);
    // setTimeout(function(){
    //   wx.hideLoading()
    // },1000)
  },
  //去到某一页
  pageGo:function(){
    console.log(Number(this.data.currentPage));
    let currentPage = Number(this.data.currentPage)
    if(currentPage > this.data.pagetotal){
      this.setData({
        currentPage:this.data.pagetotal
      })
    }else if(currentPage <= 0){
      this.setData({
        currentPage:1
      })
    }
    this.triggerEvent("pageChange", currentPage);
    // console.log(currentPage);
    // wx.showLoading({
    //   title: '加载中...',
    // })
    // setTimeout(function(){
    //   wx.hideLoading()
    // },1000)
  }
  },
});

<dsx-page bind:pageChange="pageChange" page="{{1}}" total="{{30}}" size="{{7}}"></dsx-page>

并不完善…