mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-09-20 20:02:02 +08:00
refactor: 更新搜索页面样式和逻辑以支持多端兼容性
- 修改 search.scss 文件,优化样式以适应小程序和 H5/APP-PLUS 端 - 更新 searchPage.vue 文件,调整条件编译指令以支持多端展示 - 移除不必要的计算逻辑,简化代码结构,提高可读性
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user