|
@@ -13,19 +13,28 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
<!-- 主要内容区域 -->
|
|
|
- <view class="main-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
|
|
|
|
|
- <!-- 搜索框 -->
|
|
|
|
|
- <view class="search-wrapper" @click="navigateTo('/pages-sell/pages/search')">
|
|
|
|
|
- <view class="search-box-uview">
|
|
|
|
|
- <u-search placeholder="搜索关键字" :show-action="false" bg-color="transparent" height="40"
|
|
|
|
|
- :clearabled="true" v-model="keyword" :disabled="true"
|
|
|
|
|
- search-icon="/pages-sell/static/search-icon.png"></u-search>
|
|
|
|
|
- <view class="search-btn-overlay">
|
|
|
|
|
- <text>搜索</text>
|
|
|
|
|
|
|
+ <view class="main-content" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
|
|
|
|
|
+ <!-- 顶部固定区域:导航栏背景和搜索框 -->
|
|
|
|
|
+ <view class="fixed-header-area" :style="{
|
|
|
|
|
+ paddingTop: statusBarHeight + 44 + 'px',
|
|
|
|
|
+ backgroundImage: scrollTop > 0 ? 'url(/pages-sell/static/top-bg.png)' : 'none',
|
|
|
|
|
+ backgroundPosition: `center top`
|
|
|
|
|
+ }">
|
|
|
|
|
+ <view class="search-wrapper" @click="navigateTo('/pages-sell/pages/search')">
|
|
|
|
|
+ <view class="search-box-uview">
|
|
|
|
|
+ <u-search placeholder="搜索关键字" :show-action="false" bg-color="transparent" height="40"
|
|
|
|
|
+ :clearabled="true" v-model="keyword" :disabled="true"
|
|
|
|
|
+ search-icon="/pages-sell/static/search-icon.png"></u-search>
|
|
|
|
|
+ <view class="search-btn-overlay">
|
|
|
|
|
+ <text>搜索</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
+ <!-- 占位,防止内容被 fixed 区域遮挡 -->
|
|
|
|
|
+ <view class="search-placeholder"></view>
|
|
|
|
|
+
|
|
|
<!-- tab标签 -->
|
|
<!-- tab标签 -->
|
|
|
<!-- <view class="tabs-wrapper">
|
|
<!-- <view class="tabs-wrapper">
|
|
|
<u-tabs :list="hotTagList" :current="currentHotTag" @change="changeHotTag" bgColor="transparent"
|
|
<u-tabs :list="hotTagList" :current="currentHotTag" @change="changeHotTag" bgColor="transparent"
|
|
@@ -183,6 +192,8 @@ export default {
|
|
|
swiperList: [],
|
|
swiperList: [],
|
|
|
statusBarHeight: 20,
|
|
statusBarHeight: 20,
|
|
|
keyword: '',
|
|
keyword: '',
|
|
|
|
|
+ // 记录滚动距离以实现背景错位效果
|
|
|
|
|
+ scrollTop: 0,
|
|
|
// u-tabs 需要对象数组 [{name: 'xxx'}]
|
|
// u-tabs 需要对象数组 [{name: 'xxx'}]
|
|
|
hotTagList: [
|
|
hotTagList: [
|
|
|
{ name: '热搜' },
|
|
{ name: '热搜' },
|
|
@@ -216,7 +227,11 @@ export default {
|
|
|
this.getIndexCateInfo()
|
|
this.getIndexCateInfo()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- //是否有分享列表数据
|
|
|
|
|
|
|
+ // 接收外部传入的页面滚动事件
|
|
|
|
|
+ onPageScroll(scrollTop) {
|
|
|
|
|
+ this.scrollTop = scrollTop || 0;
|
|
|
|
|
+ console.log(this.scrollTop)
|
|
|
|
|
+ },
|
|
|
async hasShareList() {
|
|
async hasShareList() {
|
|
|
const res = await this.$u.api.getShareRedBagListAjax();
|
|
const res = await this.$u.api.getShareRedBagListAjax();
|
|
|
if (res.code === 200 || res.code === 0) {
|
|
if (res.code === 200 || res.code === 0) {
|
|
@@ -363,6 +378,26 @@ export default {
|
|
|
padding: 0 24rpx;
|
|
padding: 0 24rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 顶部固定区域:背景和搜索框 */
|
|
|
|
|
+.fixed-header-area {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ z-index: 99;
|
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ padding-left: 24rpx;
|
|
|
|
|
+ padding-right: 24rpx;
|
|
|
|
|
+ padding-bottom: 16rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ transition: background-color 0.2s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.search-placeholder {
|
|
|
|
|
+ height: 100rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/* 搜索框 */
|
|
/* 搜索框 */
|
|
|
.search-wrapper {
|
|
.search-wrapper {
|
|
|
margin-top: 10rpx;
|
|
margin-top: 10rpx;
|