先看效果
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;
}