组件
<template>
<view class="list-container">
<scroll-view
id="list-view"
show-scrollbar="true"
style="height: 100%"
scroll-y="true"
scroll-with-animation
:scroll-into-view="data.topItem"
:refresher-enabled="allowRefresh"
:refresher-triggered="refreshing"
:refresher-threshold="45"
refresher-background="white"
@refresherpulling="onPulling"
@refresherrefresh="onRefresh"
@refresherrestore="onRestore"
@refresherabort="onAbort"
@scroll="onScroll"
>
<!-- 返回顶部的定位标签 -->
<view id="top"></view>
<!-- 列表项 -->
<view v-for="item in list" :key="item.id">
<slot name="item" :item="item"></slot>
</view>
<view v-if="hasMore && loadingMore && list.length !== 0" style="width: 100%; text-align: center">
loading......
</view>
<view v-if="!hasMore" style="width: 100%; text-align: center">--END--</view>
</scroll-view>
<image v-if="data.scroll_top >= 1200" src="@/static/backTop.png" class="backTop" @click="handleBackTop"> </image>
</view>
</template>
<script setup lang="ts">
// import { onPullDownRefresh } from '@dcloudio/uni-app'
import { reactive, ref, withDefaults, watch, toRefs, computed, getCurrentInstance, onMounted } from 'vue'
// import { onLoad } from '@dcloudio/uni-app'
const props = withDefaults(
defineProps<{
list: Array<any>
hasMore: boolean
refreshEnabled?: boolean
}>(),
{
refreshEnabled: true,
}
)
const { list, hasMore, refreshEnabled } = toRefs(props)
const emits = defineEmits(['initList', 'loadMore'])
const { proxy } = getCurrentInstance()
const refreshing = ref<boolean>(false)
const loadingMore = ref<boolean>(false)
const listViewHeight = ref<number>(0)
const inited = ref<boolean>(false)
const data = reactive({ scroll_top: 0, topItem: '' })
watch(
list,
() => {
inited.value = true
},
{ deep: true }
)
const allowRefresh = computed(() => {
return inited.value && refreshEnabled
})
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
if (e.detail.dy < 0) return // 防止上滑页面也触发下拉
if (refreshing.value) return
refreshing.value = true
}
// 自定义下拉刷新被触发
const onRefresh = () => {
if (!refreshing.value) return
emits('initList')
setTimeout(() => {
refreshing.value = false
}, 2000)
}
// 自定义下拉刷新被复位
const onRestore = () => {
refreshing.value = false // 需要重置
}
// 自定义下拉刷新被中止
const onAbort = () => {
refreshing.value = false
}
const loadMore = () => {
if (loadingMore.value) return
loadingMore.value = true
emits('loadMore')
setTimeout(() => {
loadingMore.value = false
}, 300) // 加载完数据后将 loadingMore 设置为 false
}
const onScroll = (e) => {
const { scrollTop, scrollHeight } = e.detail
data.scroll_top = scrollTop
if (data.scroll_top < 1200) {
data.topItem = ''
}
// console.log('onScroll', scrollHeight - listViewHeight.value - scrollTop)
if (scrollHeight - listViewHeight.value - scrollTop < 60 && hasMore.value) {
!loadingMore.value && loadMore()
}
}
onMounted(() => {
const query = uni.createSelectorQuery().in(proxy)
query.select('#list-view').boundingClientRect((nodeInfo) => {
listViewHeight.value = nodeInfo.height
})
query.exec()
inited.value = true
})
const handleBackTop = () => {
data.topItem = 'top'
// data.scroll_top = 0
// let speed = data.scroll_top / 10 // 计算每毫秒减少的数值
// let intervalId = setInterval(() => {
// data.scroll_top -= speed // 每毫秒减少 speed
// if (data.scroll_top <= 0) {
// clearInterval(intervalId) // 数字减到0后清除计时器
// data.scroll_top = 0
// }
// // console.log(data.scroll_top)
// }, 150)
}
// onLoad是小程序生命周期,这里是组件应该用mounted
// onLoad(() => {
// const query = uni.createSelectorQuery().in(proxy)
// query.select('#list-view').boundingClientRect((nodeInfo) => {
// listViewHeight.value = nodeInfo.height
// })
// query.exec()
// })
// onPullDownRefresh(() => {
// console.log(1111)
// })
</script>
<style lang="scss" scoped>
.list-container {
overflow-y: auto;
#list-view {
height: 100%;
-webkit-overflow-scrolling: touch;
}
}
.backTop {
height: 100rpx;
width: 100rpx;
border-radius: 50%;
position: fixed;
right: 50rpx;
bottom: 100rpx;
}
</style>
使用
<view class="lawyerLists">
<!-- <List :has-more="true" :list="[]"></List> -->
<Empty
v-if="data.lawyers && data.lawyers.length == 0"
:icon-path="QINIU_IMG_URL + '/static/user2/NoSerach.png'"
text="暂无内容"
></Empty>
<List
v-else
:list="data.lawyers"
:has-more="data.hasMore"
@init-list="initList({ ...data.params, cur_page: 1 })"
@load-more="loadMore"
>
<template #item="{ item }">
<LawyerCard :item="item" @click="handleJumptoDetail(item)"></LawyerCard>
</template>
</List>
</view>
小程序端一切正常,打包成app后下拉刷新失效
0 个回复