uni-pages-nav.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <div class="pagination" :class="showShadow?'showShadow':''">
  3. <u-button size="mini" shape="circle" @click="goToPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</u-button>
  4. <text>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
  5. <u-button size="mini" shape="circle" @click="goToPage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</u-button>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'UniPagesNav',
  11. props: {
  12. currentPage: {
  13. type: Number,
  14. required: true
  15. },
  16. totalPages: {
  17. type: Number,
  18. required: true
  19. },
  20. showShadow: {
  21. type: Boolean,
  22. default: true
  23. }
  24. },
  25. methods: {
  26. goToPage(page) {
  27. if (page >= 1 && page <= this.totalPages) {
  28. this.$emit('pagechanged', page);
  29. }
  30. }
  31. }
  32. }
  33. </script>
  34. <style scoped>
  35. .pagination {
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. background: #fff;
  40. padding: 20rpx;
  41. border-radius: 20rpx;
  42. }
  43. .showShadow{
  44. box-shadow: 1px 1px 5px #eee;
  45. }
  46. .pagination text {
  47. margin: 0 10px;
  48. }
  49. </style>