index.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
  3. class="scroll-view-class" scroll-y>
  4. <view class="list-page">
  5. <view v-for="(item, index) in data" :key="index">
  6. <ListItem :data="item" v-if="userType === 2"/>
  7. <UserItem :data="item" v-else/>
  8. </view>
  9. <up-loadmore :line="true" status="nomore"></up-loadmore>
  10. </view>
  11. </scroll-view>
  12. </template>
  13. <script setup>
  14. import ListItem from './listItem.vue';
  15. import UserItem from './userItem.vue';
  16. import { ref, defineExpose, defineProps, defineEmits } from 'vue';
  17. const props = defineProps({
  18. data: {
  19. type: Array,
  20. default: [],
  21. },
  22. type: {
  23. type: String,
  24. default: 'ordinary', // ordinary: 普通 ranking: 排行
  25. }
  26. });
  27. const emit = defineEmits(['refresh']);
  28. const userType = uni.getStorageSync('userType') //读取本地存储
  29. const isRefreshing = ref(false)
  30. const scrolltolower = () => {
  31. console.log('底部');
  32. // emit('refresh');
  33. };
  34. const onCustomRefresh = () => {
  35. console.log('下拉刷新');
  36. isRefreshing.value = true;
  37. emit('refresh');
  38. };
  39. const handleRefreshing = (status) => {
  40. isRefreshing.value = status;
  41. }
  42. defineExpose({
  43. handleRefreshing
  44. });
  45. </script>
  46. <style lang="scss" scoped>
  47. .list-page {
  48. background: rgba(245, 245, 245, 1);
  49. padding: 12px;
  50. // height: 100%;
  51. // overflow-y: auto;
  52. .item {
  53. height: 120px;
  54. border-radius: 10px;
  55. background: rgba(255, 255, 255, 1);
  56. padding: 12px;
  57. }
  58. }
  59. .scroll-view-class {
  60. height: 100%;
  61. }
  62. </style>