app直播源代码，自定义顶部搜索栏显示隐藏

app直播源代码，自定义顶部搜索栏显示隐藏

1、wxml代码

 

1

<br><view class="bar-box" style="height: {{navBarHeight}}px;"><br>    <view wx:if="{{show}}" class="level" style="margin-top: {{barHeight}}px;"><br>        <view class="level bar"><br>            <icon class="icon-small" type="search" size="20"></icon><br>            <input placeholder="输入关键字" class="input-text" disabled="true" bindtap="searchClick" /><br>        </view><br>    </view><br>    <view class="bar-title" style="margin-top: {{barHeight}}px;" wx:else>滑动切换搜索框</view><br></view><br><!-- 搜索 --><br><view class="level search-box" style="padding-top: {{navBarHeight}}px;"><br>    <view class="level col"><br>        <icon type="search" size="20"></icon><br>        <input placeholder="输入关键字" class="input-text" disabled="true" bindtap="searchClick" /><br>    </view><br></view><br><!-- 下面为方便测试，模拟写的高度，可删除 --><br><view style="height: 900px;"></view><br>

​

2、wxss代码

 

1

<br>page {<br>    <br>}<br>.level {<br>    display: flex;<br>    align-items: center;<br>}<br>/* 状态栏 */<br>.bar-box {<br>    background-color: #66cccc;<br>    position: fixed;<br>    left: 0;<br>    right: 0;<br>    z-index: 999;<br>}<br>.bar-title {<br>    padding-top: 3%;<br>    text-align: center;<br>    font-size: 34rpx;<br>    color: white;<br>}<br>.bar {<br>    width: 80%;<br>    padding: 10rpx;<br>    border-radius: 50rpx;<br>    background-color: white;<br>    margin-right: 30%;<br>    margin-top: 1.5%;<br>    margin-left: 20rpx;<br>}<br>/* 搜索 */<br>.search-box {<br>    padding: 20rpx 0;<br>}<br>.col {<br>    width: 100%;<br>    padding: 15rpx 10rpx;<br>    border-radius: 50rpx;<br>    background-color: white;<br>    margin: 20rpx;<br>    box-shadow: 0 3rpx 3rpx 3rpx gray;<br>}<br>.input-text {<br>    font-size: 30rpx;<br>    padding-left: 10rpx;<br>}<br>

 

3、json代码

 

1	<br>{<br>    "usingComponents": {},<br>    "navigationStyle": "custom"<br>}

 

 以上就是 app直播源代码，自定义顶部搜索栏显示隐藏，更多内容欢迎关注之后的文章