pub-list-scroll.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <scroll-view :scroll-top="scrollTop" class="scroll-view" @scrolltolower="onScrollTolower" scroll-y @scroll="scroll">
  3. <slot />
  4. <uni-load-more v-if="(loaded&&status!='noMore')||(!loaded && status=='noMore')" :status="status"
  5. :content-text="contentText" />
  6. <view class="blank"></view>
  7. </scroll-view>
  8. </template>
  9. <script setup>
  10. import {
  11. ref,
  12. computed,
  13. nextTick
  14. } from 'vue';
  15. const emit = defineEmits(['next'])
  16. const props = defineProps({
  17. loaded: {
  18. type: Boolean,
  19. default: false
  20. },
  21. status: {
  22. type: String,
  23. default: "loading"
  24. },
  25. text: {
  26. type: String,
  27. default: "数据加载中..."
  28. },
  29. })
  30. const contentText = computed(() => {
  31. let _text = {
  32. contentdown: props.text,
  33. contentrefresh: props.text,
  34. contentnomore: '没有更多数据了',
  35. }
  36. return _text;
  37. })
  38. const scrollTop = ref(0)
  39. const old = ref({
  40. scrollTop: 0
  41. })
  42. const scroll = (e)=> {
  43. old.value.scrollTop = e.detail.scrollTop
  44. }
  45. const goTop = ()=> {
  46. scrollTop.value = old.value.scrollTop
  47. nextTick(() => {
  48. scrollTop.value = 0
  49. })
  50. }
  51. //顶部tab点击
  52. const onScrollTolower = () => {
  53. emit('next')
  54. }
  55. defineExpose({ goTop });
  56. </script>
  57. <style lang="scss" scoped>
  58. .scroll-view {
  59. .blank {
  60. height: 1rpx;
  61. width: 100%;
  62. }
  63. }
  64. </style>