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

View File

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