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