You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.5 KiB
75 lines
1.5 KiB
8 months ago
|
<template>
|
||
|
|
<view class="page-bg">
|
||
|
|
<view class="btn" @click="next(-1)">上一页</view>
|
||
|
|
<view class="c-box">第<input class="input" v-model='crrPage' @blur="blurInput" />/{{pageNumAll}}页 共{{totalNum}}条
|
||
|
|
</view>
|
||
|
|
<view class="btn" @click="next(1)">下一页</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ["totalNum", "pageCount", "crrNum"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
crrPage: this.crrNum, //当前页
|
||
|
|
pageNumAll: 1, //总页数
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
crrNum() {
|
||
|
|
this.crrPage = this.crrNum
|
||
|
|
console.log(this.crrNum)
|
||
|
|
},
|
||
|
|
totalNum() {
|
||
|
|
this.pageNumAll = Math.ceil(this.totalNum / this.pageCount);
|
||
|
|
if (this.pageNumAll < 1) this.pageNumAll = 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
next(page) {
|
||
|
|
let num = this.crrPage + page
|
||
|
|
if (page == -1 && num < 1) return
|
||
|
|
if (num > this.pageNumAll) return
|
||
|
|
this.$emit('pageClick', num)
|
||
|
|
},
|
||
|
|
blurInput() {
|
||
|
|
let num = parseInt(this.crrPage)
|
||
|
|
if (num < 1) num = 1
|
||
|
|
if (num > this.pageNumAll) num = this.pageNumAll
|
||
|
|
this.crrPage = num
|
||
|
|
this.$emit('pageClick', this.crrPage)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.page-bg {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
padding: 10rpx 20rpx;
|
||
|
|
border-radius: 5rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.c-box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input {
|
||
|
|
width: 100rpx;
|
||
|
|
border-bottom: 1px solid #666;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|