<view class="pBox" wx:if="{{nowPage > 0 && total > 0}}">
<!-- 左箭头 -->
<view class="item {{nowPage > 1 ? '' : 'opt'}}" bindtap="arrowleft" data-index="{{nowPage}}"
wx:if="{{showArrowLeft || alwaysShowArrow}}">
<image class="left" src="/pageleft.png"></image>
</view>
<view class="item {{nowPage - 1 == nowPage ? 'itemActive' : ''}}" wx:if="{{nowPage - 1 > 1}}" bindtap="click"
data-index="1">
<view class="">1</view>
</view>
<!-- 左侧省略号 -->
<view class="item {{nowPage - 1 == nowPage ? 'itemActive' : ''}}" wx:if="{{nowPage - 1 > 2}}">
...
</view>
<!-- 激活页的前一页 -->
<view class="item {{nowPage - 1 == nowPage ? 'itemActive' : ''}}" wx:if="{{nowPage - 1 > 0}}" bindtap="click"
data-index="{{nowPage - 1}}">
<view class="">{{ nowPage - 1 }}</view>
</view>
<!-- 激活页 -->
<view class="item {{nowPage == nowPage ? 'itemActive' : ''}}" wx:if="{{nowPage <= num}}" bindtap="click"
data-index="{{nowPage}}">
<view class="">{{ nowPage }}</view>
</view>
<!-- 激活页的后一页 -->
<view class="item {{nowPage + 1 == nowPage ? 'itemActive' : ''}}" wx:if="{{nowPage + 1 <= num}}" bindtap="click"
data-index="{{nowPage + 1}}">
<view class="">{{ nowPage + 1 }}</view>
</view>
<!-- 右侧省略号 -->
<view class="item" wx:if="{{num - nowPage - 2 >= 1}}">
...
</view>
<!-- 最后一页 -->
<view class="item" wx:if="{{num - nowPage - 2 >= 0}}" bindtap="click" data-index="{{num}}">
<view class="">{{ num }}</view>
</view>
<!-- 右箭头 -->
<view class="item {{nowPage < num ? '' : 'opt'}}" bindtap="arrowright" data-index="{{nowPage}}"
wx:if="{{showArrowRight || alwaysShowArrow}}">
<image class="left" src="/pageright.png"></image>
</view>
</view>
Component({
/**
* 组件的属性列表
*/
properties: {
type: {
type: String
},
// 每页显示条目个数
pageSize: {
type: Number,
default: 10
},
// 总数目
total: {
type: Number,
default: 0
},
// 激活
nowPage: {
type: Number,
default: 1
},
},
options: {
styleIsolation: "apply-shared"
},
/**
* 组件的初始数据
*/
data: {
showArrowRight: true,
showArrowLeft: true,
num: 0,
laveLeftPage: [],
laveRightPage: []
},
ready() {
},
/**
* 组件的方法列表
*/
methods: {
filling() {
// 总页数
let num = Math.ceil(this.data.total / this.data.pageSize);
this.setData({
num,
})
},
// 隐藏剩余页数
hideLave() {
this.setData({
laveLeftPageShow: false,
laveRightPageShow: false
})
},
// 页码被选中
click(event) {
let page = event.currentTarget.dataset.index;
if (this.data.nowPage == page) {
return;
}
this.autoAhowArrow(page);
},
// 下一页
arrowright(event) {
let page = event.currentTarget.dataset.index;
if (page < this.data.num) {
let nowPage = page + 1;
this.autoAhowArrow(nowPage);
}
},
// 上一页
arrowleft(event) {
let page = event.currentTarget.dataset.index;
if (page > 1) {
let nowPage = page - 1;
this.autoAhowArrow(nowPage);
}
},
// 自动显示左右箭头
autoAhowArrow(nowPage) {
if (nowPage <= 1) {
this.setData({
showArrowLeft: false,
showArrowRight: true
})
} else if (nowPage >= this.data.num) {
this.setData({
showArrowLeft: true,
showArrowRight: false,
})
} else {
this.setData({
showArrowLeft: true,
showArrowRight: true,
})
}
this.triggerEvent("myevent", {
type: this.data.type,
page: nowPage
})
this.hideLave();
}
}
})
.pBox {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 0 0 55rpx;
display: flex;
justify-content: center;
align-items: center;
width: 55rpx;
height: 55rpx;
background-color: #f1f1f1;
border-radius: 25%;
margin: 10rpx;
color: #666666;
border: 1px solid #999;
}
.item:active {
background-color: #e0e0e0;
color: #ff0050;
}
.itemActive {
background-color: #ff0050;
color: #fff;
border-color: #ff0050;
}
.scrollview {
background-color: #f1f1f1;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.left {
width: 10rpx;
height: 18rpx;
}
.opt {
opacity: 0.5;
}
强力驱动