maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页页面 完成顶部搜索栏和下方商品分类标签的吸顶效果

Browse Source
This commit is contained in:
赵毅 2025-09-16 17:40:12 +08:00
parent ea3566baa6
commit 814c59cba4
3 changed files with 178 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/park/temporaryOrder/index.vue
View File

@ -68,7 +68,7 @@
<!-- 停车费展示部分 -->
<view v-if="showCost1">
<view v-if="payStatus ===1" class="cost-container">
<view v-if="payStatus === 1" class="cost-container">
<view>
<image class="cost-image"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"

21
pages/index/index.css
View File

@ -1,3 +1,7 @@
page{
overflow-y: hidden;
}
.not_found_404 {
display: flex;
flex-direction: column;
@ -37,6 +41,13 @@
background-color: #f9f9f9;
}
.mainBox{
height: 80.5vh;
margin-top: 10rpx;
overflow-y: auto;
overflow-x: hidden;
}
.hot-word-container {
width: 60%;
height: 50rpx;
@ -79,7 +90,7 @@ page {
.grid_Pic {
width: 80rpx;
height: 80rpx;
margin-bottom: 15rpx;
margin-bottom: 10rpx;
}
.searchBox {
@ -87,6 +98,7 @@ page {
align-items: center;
background-color: #FFFFFF;
justify-content: space-between;
padding-bottom: 10rpx;
}
.searchBox_add {
@ -497,6 +509,7 @@ page {
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
overflow: hidden;
position: relative;
padding-top: 90rpx;
}
.tabs-container {
@ -504,6 +517,7 @@ page {
padding: 0 20rpx;
position: relative;
align-items: center;
background-color: #FFFFFF;
}
.tabs-scroll {
@ -522,7 +536,7 @@ page {
.tab-item {
padding: 0 20rpx;
margin-right: 20rpx;
font-size: 20rpx;
font-size: 24rpx;
color: #333;
background-color: #ededed;
height: 50rpx;
@ -623,7 +637,7 @@ page {
.overlay {
position: absolute;
top: 90rpx;
top: 0;
left: 0;
width: 100%;
height: 100%;
@ -739,6 +753,7 @@ page {
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
position: relative;
}
.merchantList2 {}

312
pages/index/index.vue
View File

@ -9,169 +9,171 @@
</view>
<view v-else>
<view class="container" :style="{ marginTop: top + 'px' }" v-if="loading">
<view class="white_container">
<!-- 城市信息部分 -->
<view class="searchBox" :style="{ height: localHeight + 'px' }">
<view class="searchBox_add" @tap="map">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
<view>
{{ currentCity.cityName || '选择城市' }}
</view>
<!-- 城市信息部分 -->
<view class="white_container searchBox" :style="{ height: localHeight + 'px' }">
<view class="searchBox_add" @tap="map">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
<view>
{{ currentCity.cityName || '选择城市' }}
</view>
</view>
<!-- 搜索框 -->
<view class="search2" v-if="isShowSearch">
<view class="searchBox2">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"></image>
<view class="hot-word-container">
<view class="hot-word-scroll" :style="{ transform: 'translateY(' + scrollPosition + 'rpx)' }">
<view v-for="(word, index) in hotWord" :key="index" class="hot-word-item"
@click="handleHotWordClick(word)">
{{ word }}
</view>
<!-- 搜索框 -->
<view class="search2" v-if="isShowSearch">
<view class="searchBox2">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"></image>
<view class="hot-word-container">
<view class="hot-word-scroll" :style="{ transform: 'translateY(' + scrollPosition + 'rpx)' }">
<view v-for="(word, index) in hotWord" :key="index" class="hot-word-item"
@click="handleHotWordClick(word)">
{{ word }}
</view>
</view>
<input class="search_input" placeholder='请输入内容' confirm-type='search' @input="searchInput"
@confirm="searchInput" :value="selectKeyWord" />
</view>
</view>
</view>
<!-- 功能导航区 -->
<view class="function-nav" v-if="showNav">
<view class="function-item" @click="goToShop">
<view class="icon-box">
<image class="iconImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_shop.png"
mode="widthFix" />
</view>
<text>店铺管理</text>
</view>
<view class="function-item" @click="goToOrder">
<view class="icon-box">
<image class="iconImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_order.png"
mode="widthFix" />
</view>
<text>供应商订单</text>
</view>
<view class="function-item" @click="goToWuye">
<view class="icon-box">
<image class="iconImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_wuye.png"
mode="widthFix" />
</view>
<text>物业管理</text>
</view>
</view>
<!-- 轮播图 -->
<view class="swiper">
<swiper @animationfinish="swipers" autoplay circular>
<!-- <swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)"> -->
<swiper-item v-for="(item, index) in bannerList" :key="index">
<image :src="item.pic_src" mode="aspectFill" />
</swiper-item>
</swiper>
<view class="cirList">
<view :class="['cir', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
:key="index">
</view>
</view>
</view>
<!-- 宫格列表 -->
<view class="tabList">
<u-grid :col="rowNum" :border="false">
<u-grid-item v-for="(item, index) in tabList" @click="headerServerClick(item)" :key="index">
<image class="grid_Pic" :src="item.icon_src" mode="aspectFill"></image>
<text>{{ item.title }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<!-- 广告横幅 -->
<view class="serverList1">
<view class="serverList1_left">
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_ad_left.jpg" mode="aspectFit" /> -->
<image :src="serverLeft" mode="aspectFit" />
</view>
<view class="serverList1_right">
<view :class="['serverItemRight', `serverItemRight${index + 1}`]" @tap="headerServerClick(item)"
v-for="(item, index) in serverRightList" :key="index">
<image :src="item.pic_src" mode="" />
<!-- <view>{{ item.ad_position }}</view> -->
<input class="search_input" placeholder='请输入内容' confirm-type='search' @input="searchInput"
@confirm="searchInput" :value="selectKeyWord" />
</view>
</view>
</view>
<view class="white_container margin_top20 padding_bottom32">
<view v-if="!currentCity.district" class="Tit">定位错误 未知区域</view>
<view v-else class="Tit">
<view class="local">{{ currentCity.district }}</view>附近
<view class="Tit_desc">一刻钟便利生活圈</view>
</view>
<view class="serverList">
<view class="serverList_left">
<swiper>
<swiper-item v-for="(item, index) in homeLeftList" :key="index" @click="headerServerClick(item)">
<image :src="item.pic_src" alt="" />
<!-- <view>{{ item.ad_position }}</view> -->
<view class="mainBox" ref="mainBox">
<view class="white_container">
<!-- 功能导航区 -->
<view class="function-nav" v-if="showNav">
<view class="function-item" @click="goToShop">
<view class="icon-box">
<image class="iconImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_shop.png"
mode="widthFix" />
</view>
<text>店铺管理</text>
</view>
<view class="function-item" @click="goToOrder">
<view class="icon-box">
<image class="iconImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_order.png"
mode="widthFix" />
</view>
<text>供应商订单</text>
</view>
<view class="function-item" @click="goToWuye">
<view class="icon-box">
<image class="iconImg" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_wuye.png"
mode="widthFix" />
</view>
<text>物业管理</text>
</view>
</view>
<!-- 轮播图 -->
<view class="swiper">
<swiper @animationfinish="swipers" autoplay circular>
<!-- <swiper-item v-for="(item, index) in bannerList" :key="index" @click="headerServerClick(item)"> -->
<swiper-item v-for="(item, index) in bannerList" :key="index">
<image :src="item.pic_src" mode="aspectFill" />
</swiper-item>
</swiper>
</view>
<view class="serverList_right">
<view class="serverList_right1">
<view :class="['serverItem', `serverItem${index + 1}`]" @click="headerServerClick2(item)"
v-for="(item, index) in homeRightList1" :key="index">
<view class="serverTit">{{ item.title }}</view>
<image v-if="item.pic_src" :src="item.pic_src" mode="" />
<!-- <view>{{ item.ad_position }}</view> -->
<view class="cirList">
<view :class="['cir', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
:key="index">
</view>
</view>
<view class="serverList_right2">
<view :class="['serverItem', `serverItem${index + 4}`]" @click="headerServerClick2(item)"
v-for="(item, index) in homeRightList2" :key="index">
<view class="serverTit">{{ item.title }}</view>
<image :src="item.pic_src" mode="" />
<!-- <view>{{ item.ad_position }}</view> -->
</view>
</view>
<!-- 宫格列表 -->
<view class="tabList">
<u-grid :col="rowNum" :border="false">
<u-grid-item v-for="(item, index) in tabList" @click="headerServerClick(item)" :key="index">
<image class="grid_Pic" :src="item.icon_src" mode="aspectFill"></image>
<text>{{ item.title }}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<!-- 广告横幅 -->
<view class="serverList1">
<view class="serverList1_left">
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/index_ad_left.jpg" mode="aspectFit" /> -->
<image :src="serverLeft" mode="aspectFit" />
</view>
<view class="serverList1_right">
<view :class="['serverItemRight', `serverItemRight${index + 1}`]" @tap="headerServerClick(item)"
v-for="(item, index) in serverRightList" :key="index">
<image :src="item.pic_src" mode="" />
<!-- <view>{{ item.ad_position }}</view> -->
</view>
</view>
</view>
<!-- <view class="merchant" @click="headershopEnterClick">商户申请入驻</view> -->
</view>
<!-- <view class="white_container margin_top20 main padding_bottom32">
<view class="white_container margin_top20 padding_bottom32">
<view v-if="!currentCity.district" class="Tit">定位错误 未知区域</view>
<view v-else class="Tit">
<view class="local">{{ currentCity.district }}</view>附近
<view class="Tit_desc">一刻钟便利生活圈</view>
</view>
<view class="serverList">
<view class="serverList_left">
<swiper>
<swiper-item v-for="(item, index) in homeLeftList" :key="index" @click="headerServerClick(item)">
<image :src="item.pic_src" alt="" />
<!-- <view>{{ item.ad_position }}</view> -->
</swiper-item>
</swiper>
</view>
<view class="serverList_right">
<view class="serverList_right1">
<view :class="['serverItem', `serverItem${index + 1}`]" @click="headerServerClick2(item)"
v-for="(item, index) in homeRightList1" :key="index">
<view class="serverTit">{{ item.title }}</view>
<image v-if="item.pic_src" :src="item.pic_src" mode="" />
<!-- <view>{{ item.ad_position }}</view> -->
</view>
</view>
<view class="serverList_right2">
<view :class="['serverItem', `serverItem${index + 4}`]" @click="headerServerClick2(item)"
v-for="(item, index) in homeRightList2" :key="index">
<view class="serverTit">{{ item.title }}</view>
<image :src="item.pic_src" mode="aspectFill" />
<!-- <view>{{ item.ad_position }}</view> -->
</view>
</view>
</view>
</view>
<!-- <view class="merchant" @click="headershopEnterClick">商户申请入驻</view> -->
</view>
<!-- <view class="white_container margin_top20 main padding_bottom32">
<image v-for="(item, index) in bottomList" :key="index" class="list_pic" :src="item.pic_src" mode="">
</image>
</view> -->
<!-- 分类标签栏 -->
<view class="category-tabs">
<view class="tabs-container">
<scroll-view scroll-x enable-flex class="tabs-scroll" :scroll-into-view="activeCategoryId">
<view class="tab-item" v-for="item in categoryList1" :key="item.id" :id="'category-' + item.id"
:class="{ activeTab: currentCategoryId === item.id }" @click="switchCategory(item.id)">
{{ item.cate_name }}
</view>
</scroll-view>
<view class="dropdown-btn" :class="{ active: showDropdown }" @click="toggleDropdown">
<u-icon v-if="!showDropdown" name="arrow-down" class="dropdown-icon"></u-icon>
<u-icon v-else name="arrow-up" class="dropdown-icon active"></u-icon>
</view>
</view>
<!-- 分类下拉列表 -->
<view class="category-dropdown" v-if="showDropdown">
<view class="dropdown-title">商品分类</view>
<view class="category-grid">
<view class="category-grid-item" v-for="item in categoryList" :key="item.id"
:class="{ activeTab: currentCategoryId === item.id }" @click="selectCategoryFromDropdown(item.id)">
{{ item.cate_name }}
<!-- 分类标签栏已移至mainBox下方作为子盒子，保持视觉位置不变 -->
<u-sticky>
<view class="tabs-container">
<scroll-view scroll-x enable-flex class="tabs-scroll" :scroll-into-view="activeCategoryId">
<view class="tab-item" v-for="item in categoryList1" :key="item.id" :id="'category-' + item.id"
:class="{ activeTab: currentCategoryId === item.id }" @click="switchCategory(item.id)">
{{ item.cate_name }}
</view>
</scroll-view>
<view class="dropdown-btn" :class="{ active: showDropdown }" @click="toggleDropdown">
<u-icon v-if="!showDropdown" name="arrow-down" class="dropdown-icon"></u-icon>
<u-icon v-else name="arrow-up" class="dropdown-icon active"></u-icon>
</view>
</view>
</view>
<!-- 分类下拉列表 -->
<view class="category-dropdown" v-if="showDropdown">
<view class="dropdown-title">商品分类</view>
<view class="category-grid">
<view class="category-grid-item" v-for="item in categoryList" :key="item.id"
:class="{ activeTab: currentCategoryId === item.id }" @click="selectCategoryFromDropdown(item.id)">
{{ item.cate_name }}
</view>
</view>
</view>
</u-sticky>
<!-- 商家列表展示 -->
<view class="merchantList" :class="{ merchantList2: merchatList.length < 3 }">
<view class="overlay" v-if="showDropdown"></view>
@ -204,7 +206,8 @@
</view>
</view>
<view class="merchantItem_right_con_right" @click="toJump(item)">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png"
mode="aspectFill"></image>
点评
</view>
@ -215,12 +218,13 @@
</view>
</view>
</view>
<view class="more" v-if="flag">下拉加载后续10条，共计{{ bottomTotal }}条</view>
<nav-footer />
</view>
<view class="more" v-if="flag">下拉加载后续10条，共计{{ bottomTotal }}条</view>
<nav-footer />
</view>
</view>
</view>
@ -1047,22 +1051,24 @@ export default {
this.showDropdown = false;
this.$nextTick(() => {
uni.pageScrollTo({
scrollTop: 1000,
duration: 300
});
// 获取mainBox元素并使其滚动到底部
const mainBox = this.$refs.mainBox;
if (mainBox) {
mainBox.scrollTop = 1000;
}
});
},
toggleDropdown() {
this.showDropdown = !this.showDropdown;
// 当展开下拉菜单时，页面滑动
// 当展开下拉菜单时，在mainBox内滑动
if (this.showDropdown) {
this.$nextTick(() => {
uni.pageScrollTo({
scrollTop: 1000,
duration: 300
});
// 获取mainBox元素并使其滚动到底部
const mainBox = this.$refs.mainBox;
if (mainBox) {
mainBox.scrollTop = 1000;
}
})
}
},