magazine-web/components/nav-bar.vue

<template>
  <view class="box-bg" :style="{'height': customBarH + 'px' }">
    <uni-nav-bar>
        <block class="uni-picker" slot="left">
          <picker @change="bindPickerChange" :value="index" :range="array" :range-key="'name'">
            <view>{{array[index].name}}</view>
          </picker>
          <uni-icons type="arrowdown" color="#666" size="18" />
        </block>
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
          <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
            @confirm="confirm" @focus="isTag = true" @blur="isTag = false" />
        </view>
    </uni-nav-bar>
    <view v-if="isTag" class="tagMask" :style="{'height': makerHeigth + 'px', 'top': statusBarH + customBarH + 'px' }">
      <uni-card :title="title">
        <view class="cardBox">
          <uni-tag class="tag" v-for="(item, index) in tagList" :key="index" :text="item.name"/>
        </view>
			</uni-card>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        title: '热门文章',
        isTag: false,
        statusBarH: 0,
        customBarH: 0,
        screenHeight: 0,
        makerHeigth: 0,
				index: 0,
				array: [
          { name: '文章', code: 0 },
          { name: '期刊', code: 1 }
				],
        tagList: [
          { name: '标签1', code: '1' },
          { name: '标签2', code: '2' },
          { name: '标签3', code: '3' },
          { name: '标签10', code: '4' },
          { name: '标签20', code: '5' },
          { name: '标签30', code: '6' },
          { name: '标签13', code: '7' },
          { name: '标签25', code: '8' },
          { name: '标签39', code: '9' },
          { name: '标签17', code: '10' },
          { name: '标签25', code: '11' },
          { name: '标签34', code: '12' }
        ]
			}
		},
		methods: {
      // 类型选项改变
      bindPickerChange(e) {
        this.index = e.target.value;
        this.type = this.array[e.target.value].code;
        this.title = `热门${this.array[e.target.value].name}`
      },
      // 搜索
      confirm(e) {
        console.log('搜索');
        this.isTag = false;
      }
    },
    // 获取状态栏和导航条高度
    created() {
      const app = getApp()
      this.statusBarH = app.globalData.statusBarH;
      this.customBarH = app.globalData.customBarH - this.statusBarH;
      this.screenHeight = app.globalData.screenHeight;
      this.makerHeigth = this.screenHeight - app.globalData.customBarH;
    },
	}
</script>

<style lang="scss" scope>
$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		// padding: 5px 0;
	}


	.uni-picker {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		width: 500rpx;
		// flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
    // width: 90%;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		width: 80%;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
  .tagMask {
    width: 100vw;
    // height: 100vh;
    background: #fff;
    position: fixed;
    // top: 0;
    left: 0;
    z-index: 999;
  }
  .cardBox {
    display: flex;
    flex-wrap: wrap;
    .tag {
      margin: 5px;
    }
  }
</style>