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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -13,7 +13,7 @@
</view> </view>
</view> </view>
<view class="title-box" v-if="state.formInfo?.description"> <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>
<!-- 表单主体内容 --> <!-- 表单主体内容 -->
<view class="form-content"> <view class="form-content">