150 lines
3.5 KiB
Vue
150 lines
3.5 KiB
Vue
<template>
|
|
<view v-if="pagesData.length">
|
|
<view class="u-flex pagination u-row-center u-font-28">
|
|
<view class="prve btn" :class="{disabled:currentPage===1}" @tap="btnClick('')">上一页</view>
|
|
<view>
|
|
<picker @change="pageChange" :value="defaultPaageIndex" :range="pagesData">
|
|
<view class="u-flex current-page u-col-center btn">
|
|
<text class="page color-main font-bold">{{currentPage}}</text>
|
|
<!-- <text class="page color-main font-bold">{{currentPage}}/{{maxPage}}</text> -->
|
|
<view class="arrow-down"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<!-- <view class="u-flex current-page u-col-center btn">
|
|
|
|
<text class="page color-main font-bold">{{page}}</text>
|
|
<view class="arrow-down"></view>
|
|
</view> -->
|
|
<view class="next btn" :class="{disabled:currentPage===maxPage}" @tap="btnClick('add')">下一页</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
const props = defineProps({
|
|
size: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
totalElements: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
page: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
pages: {
|
|
type: [Array, Number],
|
|
default: [1]
|
|
},
|
|
defaultPaageIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
const emits = defineEmits(['change','update:page'])
|
|
|
|
let currentPage = ref(props.page === 0 ? 1 : props.page)
|
|
|
|
function returnMaxPage() {
|
|
const result=Math.ceil(props.totalElements / props.size)
|
|
return result
|
|
}
|
|
let maxPage=ref(returnMaxPage())
|
|
const pagesData = computed(() => {
|
|
maxPage.value=returnMaxPage()
|
|
return new Array(returnMaxPage()).fill(1).map((v, index) => index + 1)
|
|
})
|
|
|
|
|
|
// const pagesData = ref( Array.isArray(props.pages) ? props.pages : new Array(props.pages).fill(1).map((v,index)=>index+1))
|
|
// const maxPage=ref( Array.isArray(props.pages)? (props.pages[props.pages.length - 1] +1): (props.pages+1))
|
|
let defaultPaageIndex = ref(props.defaultPaageIndex > 0 ? props.defaultPaageIndex : props.page - 1)
|
|
|
|
//设置页码值
|
|
function setCurrentPage(page) {
|
|
currentPage.value = page
|
|
}
|
|
|
|
function pageChange(e) {
|
|
setCurrentPage(e.detail.value * 1 + 1)
|
|
}
|
|
//看是否到达临界值来决定是否改变页码
|
|
function btnClick(isAdd) {
|
|
let newPage = currentPage.value * 1 + (isAdd == 'add' ? 1 : -1)
|
|
if (newPage <= 0) {
|
|
return infoBox.showToast('已经是第一页了')
|
|
}
|
|
if (newPage > maxPage.value) {
|
|
return infoBox.showToast('没有更多页了')
|
|
}
|
|
setCurrentPage(newPage)
|
|
}
|
|
watch(()=>props.page,(newval)=>{
|
|
currentPage.value =newval
|
|
})
|
|
watch(() => currentPage.value, (newval) => {
|
|
emits('change', newval)
|
|
emits('update:page', newval)
|
|
defaultPaageIndex.value = newval - 1
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn {
|
|
box-sizing: border-box;
|
|
border: 2px solid $my-main-color;
|
|
padding: 8rpx 46rpx;
|
|
}
|
|
|
|
.pagination {
|
|
gap: 30rpx;
|
|
|
|
.current-page {
|
|
position: relative;
|
|
padding-left: 18rpx;
|
|
|
|
.page {
|
|
margin-right: 74rpx;
|
|
}
|
|
}
|
|
|
|
.prve,
|
|
.next {
|
|
background-color: $my-main-color;
|
|
color: #fff;
|
|
}
|
|
|
|
.prve,.next {
|
|
&.disabled {
|
|
// background-color: #ccc;
|
|
// border-color: #ccc;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.arrow-down {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 12rpx;
|
|
margin-top: 10rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 20rpx solid $my-main-color;
|
|
border-right: 20rpx solid transparent;
|
|
border-left: 20rpx solid transparent;
|
|
border-bottom: 20rpx solid transparent;
|
|
}
|
|
</style> |