123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <template>
- <scroll-view :scroll-top="scrollTop" class="scroll-view" @scrolltolower="onScrollTolower" scroll-y @scroll="scroll">
- <slot />
- <uni-load-more v-if="(loaded&&status!='noMore')||(!loaded && status=='noMore')" :status="status"
- :content-text="contentText" />
- <view class="blank"></view>
- </scroll-view>
- </template>
- <script setup>
- import {
- ref,
- computed,
- nextTick
- } from 'vue';
- const emit = defineEmits(['next'])
- const props = defineProps({
- loaded: {
- type: Boolean,
- default: false
- },
- status: {
- type: String,
- default: "loading"
- },
- text: {
- type: String,
- default: "数据加载中..."
- },
- })
- const contentText = computed(() => {
- let _text = {
- contentdown: props.text,
- contentrefresh: props.text,
- contentnomore: '没有更多数据了',
- }
- return _text;
- })
- const scrollTop = ref(0)
- const old = ref({
- scrollTop: 0
- })
-
- const scroll = (e)=> {
- old.value.scrollTop = e.detail.scrollTop
- }
- const goTop = ()=> {
- scrollTop.value = old.value.scrollTop
- nextTick(() => {
- scrollTop.value = 0
- })
- }
- //顶部tab点击
- const onScrollTolower = () => {
- emit('next')
- }
- defineExpose({ goTop });
- </script>
- <style lang="scss" scoped>
- .scroll-view {
- .blank {
- height: 1rpx;
- width: 100%;
- }
- }
- </style>
|