小程序实现简单分页组件

本文实例为大家分享了小程序实现简单分页组件的具体代码，供大家参考，具体内容如下wxml:!--分页组件--viewclass=page_divviewclass=page...

本文实例为大家分享了小程序实现简单分页组件的具体代码，供大家参考，具体内容如下

wXML:

<!-- 分页组件 -->
  <view class="page_div">
   <view class="page_sum">共{{pagetotal}}页</view>
   <view class="page_prev" bindtap="prevFn">上一页</view>
   <view class="page_number_div">
    <input value="{{pageNumber}}" bindinput="inputValue" data-name="pageNumber"></input>
    <view class="pageGo" bindtap="pageGo">Go</view>
   </view>
   <view class="page_next" bindtap="nextFn">下一页</view>
</view>

wxss:

/************分页样式****************/
.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;
}
/************分页样式结束************/

js:

Page({
 data: {
  //分页数据
  pageNumber:1,
  pagetotal:5,
  page:1
 },
 onLoad: function (options) {
 
 },
 //input输入双向绑定数据
 inputValue:function(e){
  let name = e.currentTarget.dataset.name;
  let mapName ={};
  mapName[name]=e.detail && e.detail.value;
  // console.log(mapName);
  this.setData(mapName);
 },
 //上一页
 prevFn:function(){
  if(this.data.pageNumber <=1){
   wx.showToast({
    icon:php'none',
    title: '已经是最前一页',
   })
   return;
  }
 
  wx.showLoading({
   title: '加载中...',
  })
  this.setData({
   pageNumber:Number(this.data.pageNumber)-1
  })
  console.log(this.data.pageNumber);
  setTimeout(function(){
   wx.hideLoading()
  },1000)
 },
 //下一页
 nextFn:function(){
  if(this.data.pageNumber === this.data.pagetotal){
   wx.showToast({
    icon:'none',
    title: '已经是最后一页',
   })
   return;
  }
  wx.showLoading({
   title: '加载中...',
  })
  this.setData({
   pageNumber:Number(this.data.pageNumber)+1
  })
  console.log(this.data.pageNumber);
  setTimeout(function(){
   wx.hideLoading()
  },1000)
 },
 //去到某一页
 pageGo:function(){
  console.log(Number(this.data.pageNumber));
  if(Number(this.data.pageNumber) > this.data.pagetotal){
   this.setData({
    pageNumber:this.data.pagetotal
   })
  }else if(Number(this.data.pageNumber) <= 0){
   this.setData({
    pageNumber:1
   })
  }
  console.log(Number(this.data.pageNumber));
  wx.showLoading({
   title: android'加载中...',
  })
  setTimeout(function(){
   wx.hideLoading()
  },1000)
 }
})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。