小程序点击选择页码分页（上篇优化）

 先看效果

 wxml

<view class="container">
	<view class="pages_box">
	    <view bindtap="pagesFn" data-type="start">第1页</view>
		<view wx:if="{{frontPage}}" bindtap="pagesFn" data-type="previous_page">＜</view>
		<block wx:for="{{maxPages}}" wx:key="index" wx:if="{{index<6}}">
			<view wx:if="{{tyindex+index <=maxPages}}" bindtap="pagesFn" class="{{(pagesNum)%6==(index+1)%6?'active':''}}" data-number="{{tyindex+index}}" data-type="{{(index)%6}}">{{tyindex+index}}</view>
		</block>
		<view wx:if="{{lastPage}}" bindtap="pagesFn" data-type="next_page">></view>
		<view bindtap="pagesFn" data-type="end">第{{maxPages}}页</view>
	</view>
</view>

js

const app = getApp();
Page({
  data: {
    maxPages:22,//最大页码
    pagesNum:1,
    tyindex:1,
    frontPage:false,
    lastPage:false,
  },
  // 加载页面
  onLoad: function () {
    this.setData({
      lastPage:this.data.maxPages>6?true:false
    })
  },
  pagesFn:function(e){
    let type = e.currentTarget.dataset.type;
    let number = e.currentTarget.dataset.number;
    let _that = this;
    if(typeof type == "string"){//上下页
      if(type == "previous_page"){//上一页
        if(_that.data.pagesNum-1 < 1){
          return false
        }
        if((_that.data.pagesNum-1)%6==0){
          if((_that.data.pagesNum-7)<=1){
            this.setData({
              lastPage:true,
              frontPage:false,
            })
          }
          _that.setData({
            tyindex:_that.data.pagesNum-6,
            pagesNum:_that.data.pagesNum-1,
          })
        }else{
          _that.setData({
            pagesNum:_that.data.pagesNum-1,
          })
        }
      }else if(type == "next_page"){//下一页
        if(_that.data.pagesNum+1 > _that.data.maxPages){
          return false
        }
        if(_that.data.pagesNum%6==0){
          console.log(_that.data.pagesNum+6)
          console.log(_that.data.maxPages)
          if((_that.data.pagesNum+6)>=_that.data.maxPages){
            this.setData({
              lastPage:false,
              frontPage:true,
            })
          }
          _that.setData({
            tyindex:_that.data.pagesNum+1,
            pagesNum:_that.data.pagesNum+1,
          })
        }else{
          _that.setData({
            pagesNum:_that.data.pagesNum+1,
          })
        }
      }else if(type == "start"){//第一页
        _that.setData({
          pagesNum:1,
          tyindex:1,
          lastPage:true,
          frontPage:false,
        })
      }else{//最后一页
        if((_that.data.maxPages%6)==0){
          _that.setData({
            pagesNum:_that.data.maxPages,
            tyindex:_that.data.maxPages-5,
            lastPage:false,
            frontPage:true,
          })
        }else{
          _that.setData({
            pagesNum:_that.data.maxPages,
            tyindex:_that.data.maxPages+1-(_that.data.maxPages%6),
            lastPage:false,
            frontPage:true,
          })
        }
      }
    }else{
      _that.setData({
        pagesNum:number
      })
    }
    console.log(this.data.pagesNum)
    // this.DataFn()可在此调用数据函数
  },
});

wxss

/* pages/ceshiPages/index.wxss */


.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
 
.pages_box{
  margin-top: 20rpx;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: nowrap;
}
.pages_box>view{
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
  border: 1px solid #A0A0A0;
  background-color: #F7F7F7;
  display: inline-block;
  margin-left: 12rpx;
  color: #64646C;
  border-radius: 10rpx;
  text-align: center;
}
.pages_box>view.active{
  background-color: #FCD821;
  border-color: #F39800;
}
.pages_box>view:last-child,.pages_box>view:first-child{
  width: 130rpx;
  border-radius: 60rpx;
  text-align: center;
  font-size: 25rpx;
}