admin-mp下滑加载优化

admin-mp/src/pages/device/list.vue

@@ -101,10 +101,10 @@
       </view>
     </view>
 
-    <view class="load-more" v-if="deviceList.length > 0" @click="loadMore">
+    <view class="load-more" v-if="deviceList.length > 0">
       <text v-if="loadMoreStatus === 'loading'">正在加载...</text>
-      <text v-else-if="loadMoreStatus === 'noMore'">没有更多数据了</text>
-      <text v-else>点击加载更多</text>
+      <text v-else-if="loadMoreStatus === 'noMore'">— 没有更多数据了 —</text>
+      <text v-else>上拉加载更多</text>
     </view>
 
     <view class="empty-state" v-if="deviceList.length === 0 && !loading">
@@ -123,6 +123,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getDeviceList, stopDevice, getDeviceConfigList, batchModifyDeviceConfig } from '../../api/device.js'
 import { showToast, fmtDictName, getDictColor } from '../../utils/index.js'
 import dictUtil, { loadDicts } from '../../utils/dict.js'
@@ -188,12 +189,16 @@ const loadDeviceList = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadMoreStatus.value = 'loading'
     loadDeviceList(true)
   }
 }
 
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadDeviceList()
 }

admin-mp/src/pages/finance/refund.vue

@@ -77,7 +77,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -100,6 +100,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getRefundLogs, processRefund } from '../../api/finance.js'
 import { formatTime, showToast, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
 import dictUtil, { loadDicts } from '../../utils/dict.js'
@@ -170,11 +171,15 @@ const loadData = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadData(true)
   }
 }
 
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadData()
 }

admin-mp/src/pages/finance/settlement.vue

@@ -74,7 +74,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -163,6 +163,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getSettlementRecords } from '../../api/finance.js'
 import { getStationList } from '../../api/station.js'
 import { formatTime, showToast, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
@@ -258,11 +259,15 @@ const loadData = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadData(true)
   }
 }
 
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadData()
 }

admin-mp/src/pages/finance/split-record.vue

@@ -61,7 +61,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -84,6 +84,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getSplitRecords } from '../../api/finance.js'
 import { getStationList } from '../../api/station.js'
 import { formatTime, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
@@ -198,11 +199,15 @@ const loadData = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadData(true)
   }
 }
 
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadData()
 }

admin-mp/src/pages/order/list.vue

@@ -100,16 +100,15 @@
       </view>
     </view>
     
-    <!-- 加载更多 -->
+    <!-- 加载更多指示器 -->
     <view class="load-more-container">
-      <view 
-        class="load-more" 
+      <view
+        class="load-more"
         v-if="orderList.length > 0"
-        @click="loadMore"
       >
         <text v-if="loadMoreStatus === 'loading'">正在加载...</text>
-        <text v-else-if="loadMoreStatus === 'noMore'">没有更多数据了</text>
-        <text v-else>点击加载更多</text>
+        <text v-else-if="loadMoreStatus === 'noMore'">— 没有更多数据了 —</text>
+        <text v-else>上拉加载更多</text>
       </view>
       
       <!-- 空状态 -->
@@ -133,6 +132,7 @@
 
 <script setup>
 import { ref, onMounted, reactive } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getOrderList, handleRefund as refundApi } from '../../api/order.js'
 import { formatTime, showToast, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
 import dictUtil, { loadDicts } from '../../utils/dict.js'
@@ -240,12 +240,17 @@ const loadOrderList = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadMoreStatus.value = 'loading'
     loadOrderList(true)
   }
 }
 
+// 滚动到底部自动加载
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadOrderList()
 }
@@ -571,20 +576,12 @@ const onPullDownRefresh = () => {
   margin-top: 30rpx;
 }
 
-/* 加载更多 */
+/* 加载更多指示器 */
 .load-more {
   text-align: center;
   padding: 40rpx;
-  color: #666666;
+  color: #999999;
   font-size: 28rpx;
-  background-color: #FFFFFF;
-  border-radius: 48rpx;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.load-more:active {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
 }
 
 /* 空状态 */

admin-mp/src/pages/station/list.vue

@@ -75,7 +75,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -96,6 +96,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getStationList } from '../../api/station.js'
 import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
 import dictUtil, { loadDicts } from '../../utils/dict.js'
@@ -166,11 +167,15 @@ const loadData = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadData(true)
   }
 }
 
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadData()
 }

admin-mp/src/pages/system/feedback.vue

@@ -41,7 +41,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -64,6 +64,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getFeedbackList } from '../../api/system.js'
 import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
 import dictUtil, { loadDicts } from '../../utils/dict.js'
@@ -123,7 +124,9 @@ const loadData = async (isLoadMore = false) => {
   }
 }
 
-const loadMore = () => { if (hasMore.value && !loading.value) loadData(true) }
+const loadMore = () => { if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') loadData(true) }
+
+onReachBottom(() => { loadMore() })
 const handleStatusChange = (status) => { activeStatus.value = status; loadData() }
 
 const viewDetail = (item) => {

admin-mp/src/pages/system/log.vue

@@ -30,7 +30,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -53,6 +53,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getOptLogList } from '../../api/system.js'
 import { formatTime, showToast } from '../../utils/index.js'
 
@@ -104,7 +105,9 @@ const loadData = async (isLoadMore = false) => {
   }
 }
 
-const loadMore = () => { if (hasMore.value && !loading.value) loadData(true) }
+const loadMore = () => { if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') loadData(true) }
+
+onReachBottom(() => { loadMore() })
 const handleSearch = () => loadData()
 
 onMounted(() => loadData())

admin-mp/src/pages/system/notice.vue

@@ -24,7 +24,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -47,6 +47,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getNoticeList } from '../../api/system.js'
 import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
 import { loadDicts } from '../../utils/dict.js'
@@ -106,7 +107,9 @@ const loadData = async (isLoadMore = false) => {
   }
 }
 
-const loadMore = () => { if (hasMore.value && !loading.value) loadData(true) }
+const loadMore = () => { if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') loadData(true) }
+
+onReachBottom(() => { loadMore() })
 
 const viewDetail = (item) => {
   uni.showModal({

admin-mp/src/pages/user/list.vue

@@ -87,7 +87,7 @@
 
     <!-- 加载更多 -->
     <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'" @click="loadMore">上拉加载更多</text>
+      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
       <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
       <text class="load-more-text" v-else>没有更多数据了</text>
     </view>
@@ -129,6 +129,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getAppUserList } from '../../api/user.js'
 import { applyRefund } from '../../api/finance.js'
 import { formatTime, showToast, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
@@ -199,11 +200,15 @@ const loadData = async (isLoadMore = false) => {
 }
 
 const loadMore = () => {
-  if (hasMore.value && !loading.value) {
+  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
     loadData(true)
   }
 }
 
+onReachBottom(() => {
+  loadMore()
+})
+
 const handleSearch = () => {
   loadData()
 }