|
|
@@ -1,228 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="slot">
|
|
|
- <view class="slot-inner" :style="[showSearch ? { minHeight: navBarHeight + 'px' } : { height: navBarHeight + 'px' }]">
|
|
|
- <view
|
|
|
- v-if="showSearch"
|
|
|
- class="inner-showSearch"
|
|
|
- :style="[
|
|
|
- { minHeight: menuHeight + 'px' },
|
|
|
- { lineHeight: menuHeight + 'px' },
|
|
|
- { paddingLeft: menuRight * 2 + 'px' },
|
|
|
- { paddingRight: menuRight * 2 + 'px' },
|
|
|
- { paddingTop: navBarHeight - menuHeight - menuTop + 'px' },
|
|
|
- { paddingBottom: '20rpx' }
|
|
|
- ]"
|
|
|
- >
|
|
|
- <view class="page_title"
|
|
|
- :style="[
|
|
|
- { minHeight: menuHeight + 'px' },
|
|
|
- { lineHeight: menuHeight + 'px' },
|
|
|
- ]"
|
|
|
- >
|
|
|
- {{pageTitle}}
|
|
|
- </view>
|
|
|
- <view class="search-slot" :style="{ paddingTop: '16px' }">
|
|
|
- <!-- shape="square"
|
|
|
- borderRadius="0rpx"-->
|
|
|
- <u-search
|
|
|
- class="search-components"
|
|
|
- @click="goSearchPage(url)"
|
|
|
- disabled
|
|
|
- :placeholder="placeholder"
|
|
|
- :showAction="false"
|
|
|
- :bg-color="searchBgColor"
|
|
|
- :class="showSlot ? 'active' : ''"
|
|
|
- ></u-search>
|
|
|
- <slot showSlot></slot>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="inner" v-else>
|
|
|
- <view
|
|
|
- @click="$u.route({ type: 'navigateBack', delta: 1 })"
|
|
|
- class="left"
|
|
|
- v-if="showBack"
|
|
|
- :style="[{ minHeight: menuHeight + 'px' }, { lineHeight: menuHeight + 'px' }, { left: menuRight * 2 + 'px' }, { bottom: menuBotton + 'px' }]"
|
|
|
- >
|
|
|
- <u-icon size="32" name="arrow-leftward"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="page_title"
|
|
|
- :style="[
|
|
|
- { minHeight: menuHeight + 'px' },
|
|
|
- { lineHeight: menuHeight + 'px' },
|
|
|
- ]"
|
|
|
- >
|
|
|
- <!-- { left: showBack ? menuRight * 2 + 40 + 'px' : menuRight * 2 + 'px' },
|
|
|
- { bottom: menuBotton + 'px' } -->
|
|
|
- {{pageTitle}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- + 27 -->
|
|
|
- <view class="slot-height" v-if="showSearch" :style="[{ height: navBarHeight + menuHeight+statusBarHeight + 'px' }]"></view>
|
|
|
- <view class="slot-height" v-else :style="[{ height: navBarHeight + 'px' }]"></view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-const app = getApp();
|
|
|
-export default {
|
|
|
- name: 'navbar-tab-search',
|
|
|
- props: {
|
|
|
- // 配置项
|
|
|
- tabOps: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return ['tab1', 'tab2'];
|
|
|
- }
|
|
|
- },
|
|
|
- pageTitle:{
|
|
|
- type: String,
|
|
|
- default: '书嗨',
|
|
|
- },
|
|
|
- // 占位内容
|
|
|
- placeholder: {
|
|
|
- type: String,
|
|
|
- default: '请输入'
|
|
|
- },
|
|
|
- // 是否显示插槽,用于输入框右侧内容的显示
|
|
|
- showSlot: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 是否显示搜索框
|
|
|
- showSearch: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 跳转的url
|
|
|
- url: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- // 是否显示返回按钮
|
|
|
- showBack: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 导航栏高度
|
|
|
- navBarHeight: app.globalData.navBarHeight,
|
|
|
- statusBarHeight: app.globalData.statusBarHeight,
|
|
|
- menuRight: app.globalData.menuRight,
|
|
|
- menuBotton: app.globalData.menuBotton,
|
|
|
- menuHeight: app.globalData.menuHeight,
|
|
|
- menuTop: app.globalData.menuTop,
|
|
|
- // 当前tab
|
|
|
- current: 0,
|
|
|
- // 背景色
|
|
|
- searchBgColor: this.$appTheme.appThemeSearchBgColor
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- // 切换tab
|
|
|
- change(index) {
|
|
|
- this.current = index;
|
|
|
- this.$emit('change', index);
|
|
|
- },
|
|
|
-
|
|
|
- // 去搜索页面
|
|
|
- goSearchPage(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .page_title{
|
|
|
- text-align: center;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-.slot {
|
|
|
- width: 100vw;
|
|
|
-}
|
|
|
-.slot-inner {
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 899;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-/* .tabList {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .tab {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 400;
|
|
|
- margin-right: 48rpx;
|
|
|
- color: $app-theme-navbar-tab-color;
|
|
|
- &.active {
|
|
|
- font-weight: 500;
|
|
|
- color: $app-theme-navbar-tab-color-active;
|
|
|
- font-size: 40rpx;
|
|
|
- position: relative;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 16rpx;
|
|
|
- height: 6rpx;
|
|
|
- background: $app-theme-navbar-tab-color-active;
|
|
|
- border-radius: 1px;
|
|
|
- position: absolute;
|
|
|
- bottom: -10rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
- */
|
|
|
-.inner {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- background-color: $app-theme-bg-color;
|
|
|
- .left {
|
|
|
- position: absolute;
|
|
|
- z-index: 999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- // 防误触
|
|
|
- width: 30x;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- /* .tabList {
|
|
|
- width: 50%;
|
|
|
- position: absolute;
|
|
|
- z-index: 999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- } */
|
|
|
-}
|
|
|
-.inner-showSearch {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: $app-theme-bg-color;
|
|
|
- .tabList {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-}
|
|
|
-.search-slot {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .search-components {
|
|
|
- width: 100%;
|
|
|
- &.active {
|
|
|
- width: 86%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|