magazine-web/components/nav-bar.vue

<template>
  <view class="box-bg" :style="{'height': customBarH + 'px', 'padding-top': statusBarH + '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="focus" />
        </view>
    </uni-nav-bar>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        statusBarH: 0,
        customBarH: 0,
				index: 0,
				array: [
          { name: '文章', code: 0 },
          { name: '期刊', code: 1 }
				]
			}
		},
		methods: {
      // 类型选项改变
      bindPickerChange(e) {
        this.index = e.target.value;
        this.type = this.array[e.target.value].code;
      },
      // 搜索
      confirm(e) {
        console.log('搜索');
      },
      // 聚焦
      focus(e) {
        console.log('聚焦');
      }
    },
    // 获取状态栏和导航条高度
    created() {
      const app = getApp()
      this.statusBarH = app.globalData.statusBarH
      this.customBarH = app.globalData.customBarH - this.statusBarH
    },
	}
</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;
	}
</style>