refactor: 更新搜索页面样式和逻辑以支持多端兼容性

- 修改 search.scss 文件,优化样式以适应小程序和 H5/APP-PLUS 端
- 更新 searchPage.vue 文件,调整条件编译指令以支持多端展示
- 移除不必要的计算逻辑,简化代码结构,提高可读性
This commit is contained in:
田香琪
2026-08-10 14:08:01 +08:00
parent 359d1ad24c
commit f51fcad9c2
2 changed files with 25 additions and 80 deletions

View File

@@ -133,14 +133,23 @@ page {
margin-bottom: 20rpx;
}
}
.scoll-page,
.goods-scroll {
.scoll-page {
flex: 1;
min-height: 0;
height: 100%;
box-sizing: border-box;
}
/* #ifdef MP */
.goods-scroll {
flex: 1;
height: 0;
min-height: 0;
width: 100%;
box-sizing: border-box;
}
/* #endif */
.search-navbar-wrap {
box-sizing: border-box;
flex-shrink: 0;
@@ -163,6 +172,12 @@ page {
background: $bg-color;
}
/* #ifdef MP */
.goods-content {
height: 0;
}
/* #endif */
.content {
background-color: $bg-color;
height: 100vh;
@@ -171,14 +186,16 @@ page {
flex-direction: column;
}
/* #ifdef H5 */
/* #ifdef H5 || APP-PLUS */
.content--goods {
display: block;
height: auto;
min-height: 100vh;
overflow: visible;
}
.goods-content--h5 {
display: block;
flex: none;
min-height: auto;
overflow: visible;
@@ -440,6 +457,7 @@ page {
display: flex;
width: 100%;
height: 80rpx;
flex-shrink: 0;
background: #fff;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
z-index: 10;

View File

@@ -105,7 +105,7 @@
</view>
<view class="nav-item" @click="sortGoods">筛选</view>
</view>
<!-- #ifdef H5 -->
<!-- #ifdef H5 || APP-PLUS -->
<view v-if="!empty && isSWitch" class="goods-list-wrap">
<goodsList :res="goodsListData" type="oneColumns" :keyword="keyword" :tab-bar-gap="false" />
<uni-load-more :status="loadingType" @clickLoadMore="loadmore"></uni-load-more>
@@ -115,12 +115,11 @@
<uni-load-more :status="loadingType" @clickLoadMore="loadmore"></uni-load-more>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- #ifdef MP -->
<!-- 一行一个商品展示 -->
<scroll-view
v-if="!empty && isSWitch"
class="goods-scroll"
:style="goodsScrollStyle"
enableBackToTop="true"
lower-threshold="250"
@scrolltolower="loadmore()"
@@ -134,7 +133,6 @@
<scroll-view
v-if="!empty && !isSWitch && goodsListData.length"
class="goods-scroll"
:style="goodsScrollStyle"
scroll-anchoring
enableBackToTop="true"
@scrolltolower="loadmore()"
@@ -249,14 +247,10 @@ import {
computed,
watch,
nextTick,
getCurrentInstance,
onMounted,
onBeforeUnmount,
} from 'vue'
import {
onLoad,
onReady,
onShow,
onReachBottom,
onPageScroll,
} from '@dcloudio/uni-app'
@@ -268,7 +262,6 @@ import mSearch from '@/components/m-search-revision/m-search-revision.vue'
import storage from '@/utils/storage'
const store = useStore()
const { proxy } = getCurrentInstance()!
const mSearchRef = ref<any>(null)
@@ -328,7 +321,6 @@ const sortParams = ref<any>({
const routerVal = ref<any>('')
const capsuleInsetRight = ref(0)
const searchNavbarWidth = ref(0)
const goodsScrollHeight = ref(0)
const searchNavbarStyle = computed(() => {
if (searchNavbarWidth.value) {
@@ -341,17 +333,7 @@ const searchNavbarStyle = computed(() => {
}
})
const goodsScrollStyle = computed(() => {
if (goodsScrollHeight.value > 0) {
return {
height: `${goodsScrollHeight.value}px`,
}
}
return {}
})
onPageScroll((e) => {
console.log(e)
scrollTop.value = e.scrollTop
})
@@ -390,23 +372,6 @@ onLoad((val) => {
onReady(() => {
setSearchNavbarWidth()
calcGoodsScrollHeight()
})
onShow(() => {
calcGoodsScrollHeight()
})
onMounted(() => {
// #ifdef H5
window.addEventListener('resize', calcGoodsScrollHeight)
// #endif
})
onBeforeUnmount(() => {
// #ifdef H5
window.removeEventListener('resize', calcGoodsScrollHeight)
// #endif
})
watch(keyword, (val) => {
@@ -427,22 +392,8 @@ watch(sortPopup, (val) => {
}
})
watch(isShowSeachGoods, (val) => {
if (val) {
nextTick(() => {
calcGoodsScrollHeight()
})
}
})
watch(isSWitch, () => {
nextTick(() => {
calcGoodsScrollHeight()
})
})
onReachBottom(() => {
// #ifdef H5
// #ifdef H5 || APP-PLUS
if (!isShowSeachGoods.value || loadingType.value !== 'more') {
return
}
@@ -450,27 +401,6 @@ onReachBottom(() => {
// #endif
})
function calcGoodsScrollHeight() {
nextTick(() => {
const query = uni.createSelectorQuery().in(proxy)
query.select('.goods-content').boundingClientRect()
query.select('.goods-content .navbar').boundingClientRect()
query.exec((res) => {
const contentRect = res[0]
const navbarRect = res[1]
if (!contentRect) {
return
}
const sortBarHeight = navbarRect ? navbarRect.height : uni.upx2px(80)
const { windowHeight } = uni.getWindowInfo()
const height =
Math.max(contentRect.height, windowHeight - contentRect.top) -
sortBarHeight
goodsScrollHeight.value = Math.max(height, 0)
})
})
}
function setSearchNavbarWidth() {
// #ifdef MP-WEIXIN
try {
@@ -738,9 +668,6 @@ async function loadData(type?: string, _loading?: number) {
empty.value = goodsListData.value.length === 0
initSortGoods()
nextTick(() => {
calcGoodsScrollHeight()
})
if (store.state.isShowToast) {
uni.hideLoading()
}
@@ -849,7 +776,7 @@ function saveKeyword(saveKey: string) {
@import './search.scss';
</style>
<style lang="scss">
/* #ifdef H5 */
/* #ifdef H5 || APP-PLUS */
page {
height: auto;
min-height: 100vh;