<!-- 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>
并不完善…