当前位置：首页 > news >正文

下拉加载问题

news 2025/8/1 17:43:52

微信小程序开发时发现一个问题：下拉加载后回不去了，哎！请教大佬后就立马解决了。uniapp下拉加载
事情的开头，总是很美好！

  <!-- 订单列表 --><scroll-view scroll-y class="order-list" @scrolltolower="loadMore" refresher-enabled:refresher-triggered="refreshing" lower-threshold="100" @refresherrefresh="onRefresh"><block v-for="(order, index) in filteredOrders" :key="order.id"><view class="order-card"><!-- 序号标识 - 位于卡片左上角 --><view class="order-number-badge"><text class="number-text">{{ index + 1 }}</text></view><!-- 订单头 --><view class="order-header">
<!--            <text class="order-no">订单号：{{ order.no }}</text>--><text class="time-limit" style="color: #1989fa" @click="goToOrderDetail(order)">查看全部</text></view><!-- 订单主体 --><view class="order-body"><!-- 左边信息 --><view class="info-left"><view class="info-item">
<!--                <uni-icons type="list" color="#666" size="17"></uni-icons>--><text class="order-no">订单号：{{ order.no }}</text></view><view class="info-item"><uni-icons type="person-filled" color="#666" size="17"></uni-icons><text class="text">{{ order.receiverName }}</text></view><view class="info-item"><uni-icons type="phone-filled" color="#666" size="17"></uni-icons><text class="text">{{ order.receiverMobile }}</text></view><view class="info-item"><uni-icons type="shop-filled" color="#666" size="17"></uni-icons><text class="text">{{ order.shopName || '未知店铺' }}</text></view></view><!-- 右边价格 --><view class="price-box"><text class="price">{{ order.productCount }}件</text></view></view><view class="order-footer"><view class="shop-photo" v-if="order.shopSignboard" @click="previewShopPhoto(order.shopSignboard)"><up-image :src="order.shopSignboard" mode="aspectFill" width="60rpx" height="60rpx"radius="8rpx"></up-image></view><view class="order-address"><text class="text">{{ order.receiverDetailAddress }}</text></view><button class="grab-btn" :disabled="!isOrderClickable(order.status)":class="getOrderButtonClass(order.status)":style="{ backgroundColor: getOrderButtonTextColor(order.status) }" @click="updateStatus(order)">{{ getOrderButtonText(order.status) }}</button></view></view></block><!-- 空状态 --><view v-if="filteredOrders.length === 0" class="empty-tip"><up-empty mode="order"> </up-empty></view><!-- 加载中 / 没有更多 --><view class="list-footer"><view v-if="isLoading">加载中...</view><view v-else-if="hasMore === 'false' && filteredOrders.length !== 0">没有更多订单了</view></view></scroll-view>

样式部分：

.order-list {flex: 1;padding: 20rpx 0;background-color: #f5f5f5;}.order-card {background: #fff;border-radius: 16rpx;margin-bottom: 20rpx;padding: 24rpx;box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);position: relative;overflow: visible;// 序号徽章 - 位于卡片左上角.order-number-badge {position: absolute;top: 0;left: 0;width: 55rpx;height: 55rpx;background: #1989fa;border-radius: 15%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4rpx 12rpx rgba(25, 137, 250, 0.3);border: 3rpx solid #fff;z-index: 10;.number-text {font-size: 30rpx;color: #fff;font-weight: bold;line-height: 1;}}.order-header {display: flex;justify-content: right;align-items: center;margin-top: 5rpx;margin-bottom: 20rpx;.order-no {font-size: 26rpx;color: #666;}.time-limit {font-size: 24rpx;font-weight: bold;}}.order-body {display: flex;justify-content: space-between;margin-bottom: 20rpx;.info-left {flex: 1;.info-item {display: flex;align-items: center;margin-bottom: 15rpx;font-size: 26rpx;color: #333;.text {margin-left: 20rpx;}}.shop-info {display: flex;align-items: center;justify-content: space-between;margin-top: 12rpx;padding: 12rpx 16rpx;border-radius: 12rpx;.shop-item {display: flex;align-items: center;flex: 1;.shop-name {margin-left: 8rpx;font-size: 26rpx;color: #333;font-weight: 500;max-width: 200rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}.shop-photo {margin-left: 12rpx;border-radius: 8rpx;overflow: hidden;width: 100rpx;height: 100rpx;box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);&:active {transform: scale(0.95);transition: transform 0.1s ease;}}}}.price-box {width: 180rpx;text-align: right;.price {display: block;font-size: 36rpx;color: #ee0a24;font-weight: bold;margin-bottom: 10rpx;}.distance {font-size: 24rpx;color: #999;}}}.order-footer {display: flex;align-items: flex-start; // 修改为顶部对齐justify-content: space-between;padding-top: 20rpx;border-top: 1px solid #eee;min-height: 80rpx; // 保证最小高度.shop-photo {width: 60rpx;height: 60rpx;border-radius: 8rpx;overflow: hidden;flex-shrink: 0;&:active {transform: scale(0.95);transition: transform 0.1s ease;}}.order-address {flex: 1;margin-left: 20rpx;margin-right: 20rpx;.text {font-size: 26rpx;color: #333;line-height: 1.4;}}.special-tag {width: 120rpx;height: 40rpx; // 固定高度object-fit: contain;}.grab-btn {height: 60rpx;line-height: 60rpx;padding: 0 30rpx;margin: 0;font-size: 28rpx;border-radius: 40rpx;background: #1989fa;color: #fff;flex-shrink: 0;// 移除按钮默认样式&::after {border: none;}&.grabbed {background: #c8c9cc;}.footer-address {display: flex;flex-direction: row;margin-right: 5px;}}}}.empty-tip {text-align: center;padding: 100rpx 0;.empty-img {width: 300rpx;margin-bottom: 40rpx;}.text {display: block;color: #999;font-size: 28rpx;}}}.list-footer {text-align: center;margin-top: 30rpx;font-size: 26rpx;color: #999;}