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
CentOS 7.6 installation of MySQL 5.7 GA version tutorial diagram
Table of contents Environment Preparation Environ...
How to use node to implement static file caching
Table of contents cache Cache location classifica...
Swiper.js plugin makes it super easy to implement carousel images
Swiper is a sliding special effects plug-in built...
Detailed explanation of Linux text editor Vim
Vim is a powerful full-screen text editor and the...
How to automatically backup the script for Linux servers (mysql, attachment backup)
1. Create the backup.sh script file #!/bin/sh SOU...
Tips for using top command in Linux
First, let me introduce the meaning of some field...
How to run Spring Boot application in Docker
In the past few days, I have studied how to run s...
Detailed explanation of Object.create instance usage in js
1. Create a new object using the Object.create() ...
Practical MySQL + PostgreSQL batch insert update insertOrUpdate
Table of contents 1. Baidu Encyclopedia 1. MySQL ...
Vue implements the operation code of clicking a button to download a file (backend Java)
In the previous article, I introduced the functio...
HTML implements a fixed floating semi-transparent search box on mobile
Question. In the mobile shopping mall system, we ...
Table related arrangement and Javascript operation table, tr, td
Table property settings that work well: Copy code ...
Use mysql to record the http GET request data returned from the url
Business scenario requirements and implementation...
Difference between varchar and char types in MySQL
Table of contents aforementioned VARCHAR Type VAR...
About the processing of adaptive layout (using float and margin negative margin)
Adaptive layout is becoming more and more common i...