style:设备台账-列表下拉加载更多

master
黄伟杰 3 weeks ago
parent 1b97a41b27
commit 4bd5c8afab

@ -28,14 +28,7 @@
</view>
</view>
<scroll-view
scroll-y
class="list-scroll"
:scroll-top="scrollTop"
@scroll="onScroll"
@scrolltolower="loadMore"
:lower-threshold="80"
>
<view class="list-scroll">
<view class="list-wrap">
<view v-for="item in list" :key="item.id" class="ledger-card" @click="openDetail(item)">
<view class="card-top">
@ -64,7 +57,7 @@
<view v-else-if="loadingMore" class="loading-text">{{ t('functionCommon.loadingMore') }}</view>
<view v-else-if="finished" class="finished-text">{{ t('functionCommon.noMore') }}</view>
</view>
</scroll-view>
</view>
<view v-if="showGoTop" class="go-top-btn" @click="goTop">
<uni-icons type="top" size="22" color="#ffffff"></uni-icons>
@ -88,7 +81,7 @@
<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import { getDeviceLedgerPage, updateDeviceLedger } from '@/api/mes/deviceLedger'
@ -113,7 +106,6 @@ const finished = ref(false)
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const scrollTop = ref(0)
const showGoTop = ref(false)
const statusUpdatingMap = ref({})
@ -152,6 +144,14 @@ onLoad(async () => {
await fetchList(true)
})
onReachBottom(() => {
loadMore()
})
onPageScroll((e) => {
showGoTop.value = (e?.scrollTop || 0) > 600
})
async function fetchLineTree() {
try {
const res = await getDeviceLineTree()
@ -337,12 +337,8 @@ function parseScanResult(value) {
}
}
function onScroll(e) {
showGoTop.value = (e?.detail?.scrollTop || 0) > 600
}
function goTop() {
scrollTop.value = 0
uni.pageScrollTo({ scrollTop: 0, duration: 200 })
}
async function loadMore() {
@ -541,9 +537,9 @@ function formatDateValue(value) {
background: #ffffff;
}
// .list-scroll {
// height: calc(100vh - 210rpx);
// }
.list-scroll {
width: 100%;
}
.list-wrap {
padding: 0 4rpx 32rpx;

Loading…
Cancel
Save