uni-pages-nav.vue 985 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <div class="pagination">
  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. },
  21. methods: {
  22. goToPage(page) {
  23. if (page >= 1 && page <= this.totalPages) {
  24. this.$emit('pagechanged', page);
  25. }
  26. }
  27. }
  28. }
  29. </script>
  30. <style scoped>
  31. .pagination {
  32. display: flex;
  33. justify-content: center;
  34. align-items: center;
  35. background: #fff;
  36. padding: 20rpx;
  37. border-radius: 20rpx;
  38. box-shadow: 1px 1px 5px #eee;
  39. }
  40. .pagination text {
  41. margin: 0 10px;
  42. }
  43. </style>