微信小程序开发时发现一个问题:下拉加载后回不去了,哎!请教大佬后就立马解决了。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;
}
故事的过程总是很波折~~~
无论我怎么变,怎么问我的V0和GPT,Ta还是一直都有回应,一直都没有结果@,最终还是今天问了大佬后,大佬甩给我一个:
我就说嘛,伟大的BUG,仅需大佬一个抬手,直接毁灭!
现在就可以了
故事的结尾,总是那么难以预料,代码的结局还是HE,永无BUG!奋进~