index.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view class="list-page">
  3. <up-list @scrolltolower="scrolltolower" style="height: 100%;">
  4. <up-list-item v-for="(item, index) in data" :key="index" >
  5. <ListItem :data="item" />
  6. </up-list-item>
  7. <up-loadmore
  8. :line="true"
  9. status="nomore"
  10. ></up-loadmore>
  11. </up-list>
  12. </view>
  13. </template>
  14. <script setup>
  15. import ListItem from './listItem.vue';
  16. const props = defineProps({
  17. data: {
  18. type: Array,
  19. default: [],
  20. },
  21. type: {
  22. type: String,
  23. default: 'ordinary' , // ordinary: 普通 ranking: 排行
  24. }
  25. });
  26. const emit = defineEmits(['refresh']);
  27. const scrolltolower = () => {
  28. console.log('底部');
  29. // emit('refresh');
  30. };
  31. </script>
  32. <style lang="scss" scoped>
  33. .list-page {
  34. background: rgba(245, 245, 245, 1);
  35. padding: 12px;
  36. height: 100%;
  37. overflow-y: auto;
  38. .item {
  39. height: 120px;
  40. border-radius: 10px;
  41. background: rgba(255, 255, 255, 1);
  42. padding: 12px;
  43. }
  44. }
  45. </style>