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

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 {}

38
pages/index/index.vue
View File

@ -9,9 +9,8 @@
</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="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>
@ -38,6 +37,8 @@
</view>
</view>
</view>
<view class="mainBox" ref="mainBox">
<view class="white_container">
<!-- 功能导航区 -->
<view class="function-nav" v-if="showNav">
<view class="function-item" @click="goToShop">
@ -133,7 +134,7 @@
<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="" />
<image :src="item.pic_src" mode="aspectFill" />
<!-- <view>{{ item.ad_position }}</view> -->
</view>
</view>
@ -146,8 +147,8 @@
<image v-for="(item, index) in bottomList" :key="index" class="list_pic" :src="item.pic_src" mode="">
</image>
</view> -->
<!-- 分类标签栏 -->
<view class="category-tabs">
<!-- 分类标签栏已移至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"
@ -171,6 +172,7 @@
</view>
</view>
</view>
</u-sticky>
<!-- 商家列表展示 -->
<view class="merchantList" :class="{ merchantList2: merchatList.length < 3 }">
@ -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,7 +218,6 @@
</view>
</view>
</view>
</view>
<view class="more" v-if="flag">下拉加载后续10条，共计{{ bottomTotal }}条</view>
<nav-footer />
@ -223,6 +225,8 @@
</view>
</view>
</view>
</template>
@ -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;
}
})
}
},