效果:
源码:
<!-- 设置不使用uni-app的原生标题栏之后,为了不让界面显示到界面的顶端,但是这样就不是沉浸式标题栏-->
<template>
<view v-bind:class="bodyClass">
<view class="status-contents">
<view class="status top-view"></view>
</view>
<view v-bind:class="navClass">
<view v-bind:class="cityClass">{
{cityname}}</view>
<view class="section" v-bind:class="serachClass">
<image v-if="!show" id="imgSerach" src="../../static/images/serach.png" v-bind:class="imgserachClass"></image>
<image v-if="show" id="imgSerach" src="../../static/images/serachback.png" v-bind:class="imgserachClass"></image>
<input v-model="inputvalue" @focus="InputFocus(event)" @blur="KeyBlur" @input="KeyInput(event)" placeholder-style="color:white;"
v-bind:class="inputtextClass" :placeholder=placeholdervalue />
<image v-if="!show" src="../../static/images/voice.png" v-bind:class="imgvoiceClass"></image>
<image v-if="show" src="../../static/images/close.png" @click="closeclick" v-bind:class="closeClass"></image>
</view>
<image src="../../static/images/me.png " v-bind:class="imgpeopleClass"></image>
</view>
<image src="../../static/images/banner.png " v-bind:class="bannerClass"></image>
<view style="background-color: #FFFFFF;display: flex;flex-direction:column;" v-for="(item,index) in infoList" :key="index">
<view sty