vPaging.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <v-scroll @load="load" :refresher-enabled="refresherEnabled" @ref="ref" ref="scroll">
  3. <slot name="box" v-bind="list">
  4. </slot>
  5. </v-scroll>
  6. </template>
  7. <script>
  8. export default {
  9. name:'paging',
  10. props: {
  11. data: {
  12. default() {
  13. return {};
  14. },
  15. type: Object,
  16. require: false,
  17. },
  18. refresherEnabled:{
  19. default:true,
  20. required:false,
  21. type:Boolean
  22. },
  23. ajax: {
  24. require: true,
  25. type: Function,
  26. },
  27. height:{
  28. type:String
  29. }
  30. },
  31. data() {
  32. return {
  33. list: [],
  34. page: 0,
  35. };
  36. },
  37. methods: {
  38. load(over) {
  39. this.page++;
  40. this.getList(over);
  41. },
  42. ref(over) {
  43. this.page = 1;
  44. this.getList(over);
  45. },
  46. getList(over) {
  47. let data = Object.assign(
  48. {
  49. page: this.page,
  50. },
  51. this.data
  52. );
  53. this.ajax(data).then((res) => {
  54. let queryVo = res.data;
  55. if (queryVo.current_page == 1) this.list = [];
  56. this.list = [...this.list, ...queryVo.data];
  57. over &&
  58. over({
  59. finished: queryVo.data.length < queryVo.per_page,
  60. listLen:res.data.total
  61. });
  62. });
  63. },
  64. },
  65. created() {},
  66. };
  67. </script>