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
<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> |