How to use uni-app to display buttons and search boxes in the top navigation bar
|
Recently, the company is preparing to develop an app and finally decided to use the uni-app framework for development. However, when the design drawing was given to me, I felt a little unsure because the top of the design drawing looked like this:
Because this function is not available in the applet, I feel that it cannot be implemented. However, I looked back at the document and found that this function can be implemented. I just need to make some configuration in pages.json. This is officially called app-plus, which allows you to customize the navigation area. The specific configuration is as follows:
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarBackgroundColor": "#00c170",
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
"text": "Map",
"fontSize":"16",
"float": "right",
"color":"#fff"
},
{
"text": "Tangshan",
"fontSize":"16",
"float": "left",
"color":"#fff"
}
],
"searchInput":{
"align": "center",
"placeholder": "Please enter the information to search for properties",
"borderRadius":"50upx",
"backgroundColor": "#fff"
}
}
}
}
} ]The effect is as follows:
You may ask, how do I monitor my click events and input box events? uni-app provides the corresponding APIs, onNavigationBarButtonTap and onNavigationBarSearchInputChanged, which can be written in the response page:
export default {
onNavigationBarButtonTap() {
console.log("You clicked the button")
},
onNavigationBarSearchInputChanged () {
console.log("You entered information")
}
}Print results:
But there are two buttons, but there is only one button event. What should I do? How to get the text in the input box? In fact, these two functions receive a value, which is the corresponding information:
export default {
onNavigationBarButtonTap(val) {
console.log(val)
},
onNavigationBarSearchInputChanged (val) {
console.log(val)
}
}Print results:
The button event can be judged according to the corresponding text, and the input box listens to the input event instead of the change event, that is, it can be listened to after the input instead of losing focus Do you think that's the end? NoNoNo, sharp-eyed students found that what I did was different from the design. There is an icon on the right map that I didn’t write. If you follow the above method, you can’t add it, but we can remove the navigation bar customization. The navigation bar of each page in page.json is enabled by default. There is a navigationStyle attribute with a default value of default. We can remove it by changing it to custom:
{
"path": "pages/index/index",
"style": {
"navigationStyle":"custom"
}But the mobile navigation is still there, which requires us to use the titleNView attribute, which is used to set the navigation bar specifically, as follows:
{
"path" : "pages/secondPage/secondPage",
"style" : {
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
}Then we can write a set of navigation ourselves, and the final effect is as follows:
There is a pitfall here. In addition to setting a fixed position for this navigation, the status bar at the top of the phone is actually transparent because we have removed the default navigation:
Therefore, when we write the navigation, the upper margin is a little larger than the lower margin to ensure that the status bar is covered. Here is the source code I wrote:
<template>
<view class="head">
<view class="header-wrap">
<view class="index-header">
<text class="address" v-if="leftWords">{{leftWords}}</text>
<view class="input-wrap" v-if="input">
<input type="text"
placeholder="Please enter your search"
v-model="value"
@change="inputChange"/>
<text class="iconfont iconfangdajing"></text>
</view>
<view class="map-wrap"
v-if="rightWords||rightIcon"
@click="rightClick">
<text class="iconfont" :class="rightIcon"></text>
<text>{{rightWords}}</text>
</view>
</view>
</view>
<view class="blank"></view>
</view>
</template>
<script>
export default {
name: "IndexHeader",
props: [
'leftWords',
'input',
'rightIcon',
'rightWords'
],
data () {
return {
value: ''
}
},
methods: {
inputChange: function () {
this.$emit('change',this.value)
},
rightClick: function () {
this.$emit("rightClick")
}
}
}
</script>
<style lang="scss">
$color-base: #00c16f;
$words-color-base: #333333;
$words-color-light: #999999;
.header-wrap {
width: 100%;
position: fixed;
top: 0;
z-index: 999;
.index-header {
height: 88upx;
line-height: 88upx;
padding: 0 30upx;
padding-top: 40upx;
background-color: $color-base;
font-size: 28upx;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.address {
font-size: 26upx;
}
.input-wrap {
width: 500upx;
height: 70upx;
padding: 10upx 30upx 10upx 100upx;
box-sizing: border-box;
background-color: #fff;
border-radius: 50upx;
color: $words-color-base;
position: relative;
text {
position: absolute;
left: 40upx;
top: -8upx;
color: $words-color-light;
font-size: 30upx;
}
}
.map-wrap {
.iconfont {
font-size: 32upx;
margin-right: 5upx;
}
text {
font-size: 26upx;
}
}
}
}
.blank {
height: 126upx;
}
</style>The above is the details of how to use uni-app to display buttons and search boxes in the top navigation bar. For more information about using uni-app to display buttons and search boxes in the top navigation bar, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Windows 10 1903 error 0xc0000135 solution [recommended]
>>: Introduction to MyCat, the database middleware
Recommend
Detailed explanation of how to set the change value within a specified time in Zabbix
Background description: On an existing load balan...
JavaScript to achieve digital clock effects
This article example shares the specific code for...
Summary of various methods for Vue to achieve dynamic styles
Table of contents 1. Ternary operator judgment 2....
How to run nginx in Docker and mount the local directory into the image
1 Pull the image from hup docker pull nginx 2 Cre...
4 Ways to Quickly Teach Yourself Linux Commands
If you want to become a Linux master, then master...
Detailed explanation of the definition and function of delimiter in MySQL
When you first learn MySQL, you may not understan...
Let's talk in depth about the principle and implementation of new in JS
Table of contents definition Constructor bodies a...
Overview of the basic components of HTML web pages
<br />The information on web pages is mainly...
3 different ways to clear the option options in the select tag
Method 1 Copy code The code is as follows: documen...
How to use nginx to intercept specified URL requests through regular expressions
nginx server nginx is an excellent web server tha...
Three BOM objects in JavaScript
Table of contents 1. Location Object 1. URL 2. Pr...
How to import CSS styles into HTML external style sheets
The link-in style is to put all the styles in one...
CSS to achieve compatible text alignment in different browsers
In the front-end layout of the form, we often nee...
Explanation of the usage of replace and replace into in MySQL
MySQL replace and replace into are both frequentl...
How to use MySQL stress testing tools
1. MySQL's own stress testing tool - Mysqlsla...