uniapp【修复】: 修复页面下拉刷新时数据重复问题

This commit is contained in:
15093570141
2024-11-11 16:50:19 +08:00
parent f850432958
commit 6113df717d
10 changed files with 925 additions and 904 deletions

View File

@@ -38,12 +38,12 @@
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
type : 'vertical' | 'horizontal',
imgWidth : string,
imgHeight : string,
nameOverflow : number,
briefOverflow : number,
goodsData : any,
type ?: 'vertical' | 'horizontal',
imgWidth ?: string,
imgHeight ?: string,
nameOverflow ?: number,
briefOverflow ?: number,
goodsData ?: any,
}>(), {
type: 'horizontal', // vertical 垂直 horizontal 水平
imgWidth: '190rpx',

View File

@@ -8,8 +8,8 @@
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
title : string,
color : string,
title ?: string,
color ?: string,
}>(), {
title: '查看更多',
color: '#6E737D'

View File

@@ -3,3 +3,6 @@ export const onHomePageShow = "onHomePageShow";
/** 监听分类onHide需要的常量字段 */
export const onClassifyPageHide = "onClassifyPageHide";
/** 监听上拉刷新onPullDownRefresh要的常量字段 */
export const onClassifyPagePullDownRefresh = "onClassifyPagePullDownRefresh";

View File

@@ -240,6 +240,7 @@
onPullDownRefresh(async () => {
state.page = 1;
state.totalPages = 1;
state.goodsList = [[], []];
await handleuQueryProduct(queryParams);
uni.stopPullDownRefresh();
});

View File

@@ -124,7 +124,7 @@
<script setup lang="ts">
import { reactive, watch, ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { advertPosition, UserToken, onClassifyPageHide } from '@/core/consts';
import { advertPosition, UserToken, onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts';
import { useLoginStore } from '@/core/store';
import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models';
@@ -210,7 +210,7 @@
state.leftTabList = state.classifyData[0]?.child;
state.rightTabList = state.classifyData[0]?.child[0]?.child;
state.catId = state.classifyData[0].child[0]?.id;
state.catId = state.classifyData[0]?.child[0]?.id;
getGoodsPageList();
}
})
@@ -220,6 +220,12 @@
getCartNumAndMoney();
}
uni.$on(onClassifyPagePullDownRefresh, () => {
state.page = 1;
state.totalPages = 1;
state.goodsList = [];
})
uni.$on(onClassifyPageHide, () => {
state.showSku = false;
})
@@ -234,7 +240,7 @@
// 获取商品列表数据
const getGoodsPageList = async () => {
if (!state.catId) { return; }
const goodsPageList : Response<GoodsListType> = await queryGoodsPageList({
page: state.page,
limit: 10,

View File

@@ -75,8 +75,8 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch, nextTick } from 'vue';
import { UserToken, advertPosition, onClassifyPageHide } from '@/core/consts';
import { onMounted, reactive, ref, watch } from 'vue';
import { UserToken, advertPosition, onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts';
import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models';
import { handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils';
@@ -151,6 +151,12 @@
getCartNumAndMoney();
}
uni.$on(onClassifyPagePullDownRefresh, () => {
state.page = 1;
state.totalPages = 1;
state.goodsList = [];
})
uni.$on(onClassifyPageHide, () => {
state.showSku = false;
})
@@ -158,7 +164,7 @@
/** 获取商品列表数据 */
const getGoodsPageList = async () => {
if (!state.catId) { return; }
const goodsPageList : Response<GoodsListType> = await queryGoodsPageList({
page: state.page,
limit: 10,

View File

@@ -13,7 +13,7 @@
<view class="advert-box radius-15">
<coreshop-advert :code="advertPosition.goodsClassifyBanner"></coreshop-advert>
</view>
<view class="data-box" v-if="state.list.length > 0">
<view class="data-box" v-if="state.list && state.list.length > 0">
<view class="item-box" v-for="item,index in state.list" :key="index"
@click="handleGoCategory(item.id)">
<image class="img" :src="item.imageUrl"></image>
@@ -51,8 +51,10 @@
});
watch(() => props.data, (newVal : Array<CategoriesType>) => {
if(newVal){
state.leftTabId = newVal[0]?.id;
state.list = newVal[0]?.child;
}
})
const hanldeChangeLeftTab = (item : CategoriesType) => {

View File

@@ -50,7 +50,7 @@
import { queryAllCategories } from '@/core/api';
import { GoodsListEnum } from '@/core/enum';
import { handleRouteNavigateTo } from '@/core/utils';
import { onClassifyPageHide } from '@/core/consts';
import { onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts';
import type { Response, ShopConfigStoreType, CategoriesType } from '@/core/models';
import classifyOne from './classify-page/classify-one/classify-one.vue';
import classifyTwo from './classify-page/classify-two/classify-two.vue';
@@ -84,7 +84,7 @@
})
watchEffect(() => {
state.height = systemInfo.value.windowHeight - statusBarHeight.value ;
state.height = systemInfo.value.windowHeight - statusBarHeight.value;
})
onHide(() => {
@@ -93,6 +93,9 @@
});
onPullDownRefresh(async () => {
/** 触发onPullDownRefresh事件让后代组件监听页面是下拉刷新 */
uni.$emit(onClassifyPagePullDownRefresh);
state.categoriesList = [];
await handleuAllCategories()
uni.stopPullDownRefresh();
});

View File

@@ -12,13 +12,13 @@
import { handleAdvertiseDetail } from '@/core/utils';
const props = withDefaults(defineProps<{
data : any,
dotsSelect : boolean,
autoplaySelect : boolean,
intervalSelect : number,
circularSelect : boolean,
indicatorColor : string,
indicatorColorActive : string,
data ?: any,
dotsSelect ?: boolean,
autoplaySelect ?: boolean,
intervalSelect ?: number,
circularSelect ?: boolean,
indicatorColor ?: string,
indicatorColorActive ?: string,
}>(), {
data: {},
dotsSelect: true,

View File

@@ -13,7 +13,7 @@
</view>
</view>
<view class="title-box" v-if="state.formInfo?.description">
<view calss="title">{{ state.formInfo?.description }}1</view>
<view calss="title">{{ state.formInfo?.description }}</view>
</view>
<!-- 表单主体内容 -->
<view class="form-content">