Browse Source

fix(allDish): 修复商品列表滚动高度失效问题

重置商品列表数据前添加延迟等待,确保scrollTop能正确生效
移除无效的翻页和下拉刷新逻辑,优化滚动加载体验
master
wei 4 days ago
parent
commit
3491197f9f
  1. 11
      issue.md
  2. 58
      pages/allDish/allDish.vue
  3. 10
      pages/home/home.vue

11
issue.md

@ -0,0 +1,11 @@
- TODO: 企业注册
> ^[\u4e00-\u9fa5a-zA-Z0-9\(\)()&._-]+$
- ()
- ()
- &
- .
- _
- \-
- 中文
- 英文
- 数字

58
pages/allDish/allDish.vue

@ -61,7 +61,7 @@ const currentType = ref(0);
*/ */
const bottomHeight = ref(0); const bottomHeight = ref(0);
/** /**
* 右侧商品列表的滚动高度
* 右侧商品列表的滚动高度 FIXME: 无法生效
*/ */
const scrollTop = ref(0); const scrollTop = ref(0);
/** /**
@ -398,9 +398,13 @@ async function loadProductList(parentId, tips) {
item.showChild = item.specs.length > 1 ? false : item.showChild; item.showChild = item.specs.length > 1 ? false : item.showChild;
}); });
const temp = products.value;
products.value = [];
await sleep(100); // scrollTop.value
products.value = pageIndex.value === 1 products.value = pageIndex.value === 1
? res.data ? res.data
: [...products.value, ...(res.data || [])];
: [...temp, ...(res.data || [])];
rightHeight.value = ((await useRect("#scroll-page"))?.height || 1) + 1; rightHeight.value = ((await useRect("#scroll-page"))?.height || 1) + 1;
if (tips === 1) { if (tips === 1) {
@ -411,11 +415,12 @@ async function loadProductList(parentId, tips) {
scrollTop.value = 0; scrollTop.value = 0;
bottomHeight.value = 0; bottomHeight.value = 0;
} }
scrollTop.value = 0;
uni.hideNavigationBarLoading(); // uni.hideNavigationBarLoading(); //
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
} }
/** /**
* 滚动事件
* 滚动事件 判断触底否
* @param {Event} e - 滚动事件参数 * @param {Event} e - 滚动事件参数
*/ */
function onScroll(e) { function onScroll(e) {
@ -431,27 +436,30 @@ function onScroll(e) {
/** /**
* 翻页数据 * 翻页数据
*/ */
function onLoadList() {
const pageIdx = pageIndex.value + 1;
// function onLoadList() {
// console.log("");
if (pageIdx <= pageCount.value) {
pageIndex.value = pageIdx;
unLoading.value = false;
getProducts(scrollId.value);
}
else {
unLoading.value = true;
}
}
// const pageIdx = pageIndex.value + 1;
// if (pageIdx <= pageCount.value) {
// pageIndex.value = pageIdx;
// unLoading.value = false;
// getProducts(scrollId.value);
// }
// else {
// unLoading.value = true;
// }
// }
/** /**
* 下拉刷新 * 下拉刷新
*/ */
function onRefresherRefresh() {
triggered.value = false;
if (currentType.value != 0) {
getProducts(typeData.value[currentType.value - 1].id, 1);
}
}
// function onRefresherRefresh() {
// // console.log("");
// triggered.value = false;
// if (currentType.value != 0) {
// getProducts(typeData.value[currentType.value - 1].id, 1);
// }
// }
/** /**
* 触摸开始事件 * 触摸开始事件
* @param e 触摸事件参数 * @param e 触摸事件参数
@ -518,7 +526,6 @@ async function onTouchEnd() {
) { ) {
bottomHeight.value = 0; bottomHeight.value = 0;
if (!isSearching.value) { if (!isSearching.value) {
scrollTop.value = 0;
await getProducts(typeData.value[currentType.value + 1].id, 2); await getProducts(typeData.value[currentType.value + 1].id, 2);
} }
} }
@ -909,7 +916,6 @@ onHide(() => {
@scroll="onScroll" 滚动过程中实时监听滚动位置 @scroll="onScroll" 滚动过程中实时监听滚动位置
@refresherrefresh="onRefresherrefresh" 下拉刷新时触发重新加载当前分类数据 @refresherrefresh="onRefresherrefresh" 下拉刷新时触发重新加载当前分类数据
--> -->
<!-- FIXME: scrollTop 失效了 -->
<scroll-view <scroll-view
id="scroll-page" id="scroll-page"
class="right" class="right"
@ -932,13 +938,13 @@ onHide(() => {
transition: '.01s all', transition: '.01s all',
}" }"
@scrolltolower="() => { @scrolltolower="() => {
// FIXME: onLoadList();
onLoadList()
// TODO: onLoadList
// onLoadList()
}" }"
@scroll="onScroll" @scroll="onScroll"
@refresherrefresh="() => { @refresherrefresh="() => {
// FIXME: onRefresherRefresh();
onRefresherRefresh()
// TODO: onRefresherRefresh
// onRefresherRefresh()
}" }"
> >
<view <view

10
pages/home/home.vue

@ -464,8 +464,8 @@ onShow(() => {
:style="{ height: locationBarHeight ? `${locationBarHeight}px` : 'auto' }" :style="{ height: locationBarHeight ? `${locationBarHeight}px` : 'auto' }"
> >
<!-- left --> <!-- left -->
<!-- TODO: chooseAddress -->
<view class="left" @click="chooseAddress"> <view class="left" @click="chooseAddress">
<!-- TODO: 地址图标字体 -->
<text class="iconfont icon-positioning" /> <text class="iconfont icon-positioning" />
<text class="address"> <text class="address">
{{ selectAddress?.street ?? '待完善' }} {{ selectAddress?.street ?? '待完善' }}
@ -476,10 +476,10 @@ onShow(() => {
<!-- #ifdef APP-PLUS --> <!-- #ifdef APP-PLUS -->
<view class="" @click="shareWX"> <view class="" @click="shareWX">
<!-- TODO: 分享图标字体 -->
<!-- TODO: shareWX todo -->
<text class="iconfont icon-share" /> <text class="iconfont icon-share" />
</view> </view>
<!-- #endif -->
<!-- #endif -->
</view> </view>
<!-- 搜索框 --> <!-- 搜索框 -->
@ -525,6 +525,7 @@ onShow(() => {
<!-- 金刚区 --> <!-- 金刚区 -->
<view class="food-type-box"> <view class="food-type-box">
<template v-for="(item, index) in types" :key="index"> <template v-for="(item, index) in types" :key="index">
<!-- TODO: onMore todo -->
<view v-if="item.name !== '新品'" class="type-list" @click="onMore"> <view v-if="item.name !== '新品'" class="type-list" @click="onMore">
<image class="icon" :src="item.imageUrl" mode="scaleToFill" /> <image class="icon" :src="item.imageUrl" mode="scaleToFill" />
<text class="name"> <text class="name">
@ -549,6 +550,7 @@ onShow(() => {
<!-- 功能区 --> <!-- 功能区 -->
<view class="functional-box"> <view class="functional-box">
<!-- TODO: onFriends -->
<view class="left" @click="onFriends"> <view class="left" @click="onFriends">
<image class="img" src="/static/home/functional1.png" /> <image class="img" src="/static/home/functional1.png" />
<view class="text-box"> <view class="text-box">
@ -576,6 +578,7 @@ onShow(() => {
</view> </view>
<view class="under"> <view class="under">
<!-- TODO: onEnterPage -->
<view class="one" @click="onEnterPage"> <view class="one" @click="onEnterPage">
<image class="img" src="/static/home/functional3.png" /> <image class="img" src="/static/home/functional3.png" />
<view class="text-box"> <view class="text-box">
@ -585,6 +588,7 @@ onShow(() => {
<view class="line" /> <view class="line" />
</view> </view>
</view> </view>
<!-- TODO: onJoin -->
<view class="two" @click="onJoin"> <view class="two" @click="onJoin">
<image class="img" src="/static/home/functional4.png" /> <image class="img" src="/static/home/functional4.png" />
<view class="text-box"> <view class="text-box">

Loading…
Cancel
Save