To make the background image in uniapp<style> full screen, you can add the following styles to the tag:
page {
background-image: url('/static/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
In this style, the background-image attribute sets the URL of the background image, the background-size attribute sets the size of the background image, the background-repeat attribute sets whether to repeat the background image, and the background-position attribute sets the position of the background image. By setting background-size: cover;, let the background image fill the entire screen.
Note, before setting the background image, make sure you have this image in your project's static resource folder. In addition, if you want the background image of a page to be full screen, you can also set the style of the page in <style>.
-
How to set the picture for the navigation in the uniapp applet and remove the native navigation bar
Supplement: To add properties below the global configuration options of the pages.json file
"navigationStyle": "custom"
It means to cancel the original navigation bar, design the navigation bar by yourself, and load the content globally
<template>
<view>
<view class="status_bar">
<!-- This is the status bar-->
</view>
<view> Text under the status bar</view>
</view>
</template>
< style>
.status_bar { // This is the height setting of the navigation bar, it is best to add height (50px) height: var(--status-bar-height); width: 100%; } </style>
<template>
<view class="container">
<view class="content">
<!-- Uniapp settings page background image -->
<view class="status_bar" :style="{background: 'url(' +imageURL+')'}">
<!-- This is the status bar -->
<image src="/static/images/Menu icon.png" mode=""></image>
</view>
<view> Text under the status bar</view>
</view>
</view>
</template>
<script>
export default { data() { return { imageURL:'/static/images/navigation bar background.png' }; } } </script>
<!-- Note here that the lang='scss' attribute is translated into super css -->
<style lang="scss">
.status_bar { height: 49px; width: 100%; image { width: 24px; height: 24px ; } } </style>
The difference between uniapp page jump redirectTo, navigateTo and switchTap
Summarize the page jump of uniapp:
redirectTo: close the current page and jump to the specified page;
Close the current page and jump to a page in the app. OBJECT parameter description Parameter type is required. Description urlString is the path of the non-tabBar page in the application that needs to be redirected. Parameters can be added after the path. Parameters and paths are separated by ?, parameter keys and parameter values are connected by =, and different parameters are separated by &;
methods: {
//goregirect()为点击响应事件，可在HTML部分设置 @tap="goregirect()"
goregirect(){
uni.redirectTo({
//关闭当前页面，跳转到应用内的某个页面。
url:'/pages/about/about'
});
}
}
navigateTo: Keep the current page and jump to the specified page;
Keep the current page, jump to a page in the app, and use uni.navigateBack to return to the original page. OBJECT parameter description: The parameter type is required. The urlString is the path of the non-tabBar page in the application that needs to be redirected. Parameters can be added after the path. Parameters and paths are separated by ?, parameter keys and parameter values are connected by =, and different parameters are separated by &;
methods: {
//gonavigate()为点击响应事件，可在HTML部分设置 @tap="gonavigate()"
gonavigate(){
uni.navigateTo({
//保留当前页面，跳转到应用内的某个页面
url:'/pages/detail/detail'
})
}
}
switchTap: It can only be used to jump to the tabbar page and close other non-tabbar pages.
Jump to the tabBar page and close all other non-tabBar pages. OBJECT parameter description: The parameter type is required to indicate that urlString is the path of the tabBar page that needs to be redirected (the page that needs to be defined in the tabBar field of app.json), and the path cannot be followed by parameters
methods: {
checklogin(){
uni.request({
url:'http://localhost:8081/api/user/login',
data: {
email:this.emailone,
password:this.password,
},
success: (res) => {
//登录成功
if(res.data.success ==true) {
uni.showToast({
title:'登录成功',//显示的文字
icon:'success'//显示的图标
});
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url:'../tabbor/index/index'
});
}else{
uni.showToast({
title:'用户名或密码错误',//显示的文字
icon:'none'//显示的图标
});
}
}
})
}
}
navigateBack: Close the current page and return to the previous page or multi-level pages.
Close the current page and return to the previous page or multi-level pages. The current page stack can be obtained through getCurrentPages() to determine how many layers need to be returned. OBJECT parameter description: The parameter type is required to indicate the number of pages returned by deltaNumber1. If delta is greater than the number of existing pages, it will return to the home page.
methods: {
//goBack()为点击响应事件，可在HTML部分设置 @tap="goBack()"
goBack(){
uni.navigateBack({
//关闭当前页面，返回上一页面或多级页面。
delta:1
});
}
}
reLaunch: Close all pages and open to a page in the application.
Close all pages and open to a page within the app. OBJECT parameter description: The parameter type is required to indicate that urlString is the path of the page in the application that needs to be redirected, and parameters can be added after the path. Parameters and paths are separated by ?, parameter keys and parameter values are connected by =, and different parameters are separated by &;
uni.reLaunch(
{
url: 'test?id=1'
}
);
export default { onLoad: function (option) { console.log(option.query); } }
Call a third-party program to open the specified URL openURL
methods: {
//goopenurl()为点击响应事件，可在HTML部分设置 @tap="goopenurl()"
goopenurl(){
boid plus.runtime.openURL('https://www.baidu.com/')
}
}
uniapp page jump value transfer and reception
The general routine of passing value through jumping is to bring the value to be passed in the URL, and then use the parameter to receive it back in the onLoad function of the received page.
Value page:
uni.navigateTo({
url:'页面路径?id=1'
})
Receive page:
onLoad:function(option) {//option为object类型，会序列化上个页面传递的参数
console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1，则获取到的就是option.id
}
The basic implementation of the uniapp fallback calling method
Pages in uniapp can be redirected through uni.navigateTo, uni.redirectTo, and uni.reLaunch methods. In the process of these page jumps, we often need to implement the function of page rollback, and uniapp provides a wealth of page rollback calling methods, which are commonly used as follows:
- uni.navigateBack: This method is used to close the current page and return to the previous page or multi-level page. The calling method is relatively simple, and only needs to pass in an integer parameter. Indicates the number of layers returned, for example: uni.navigateBack(1) means to return to the previous page, uni.navigateBack(2) means to return to the previous two pages, and so on. It should be noted that the number of layers returned should not exceed the length of the current page stack, otherwise an error will occur.
- uni.switchTab: This method is used to jump to the tabBar page and close all other non-tabBar pages. This method needs to pass in a page path parameter, for example: uni.switchTab({url:'/pages/tabBar/index'}).
- uni.reLaunch: This method is used to close all pages and open a certain page. This method needs to pass in a page path parameter, for example: uni.reLaunch({url:'/pages/home/index'}).
It should be noted that the above methods are the core methods for handling page rollback in uniapp, and developers must pay attention to the correctness and rationality of passing parameters when using them.
2. Some tips about the uni.navigateBack method
The uni.navigateBack method is one of the most common methods to implement the uniapp page rollback. I believe many developers have also used it in practice. In fact, there are still some details and skills in the uni.navigateBack method that need our attention. Let's take a look:
- Use with uni.onBackPress method
In some cases, we need to monitor the user's back operation in order to do some other business operations. At this time, you can use the uni.onBackPress method to monitor. This method needs to be passed a callback function that will be triggered when the user clicks the back button. In this callback function, we can intercept and process user operations.
- Call the uni.navigateBack method in the child component
In uniapp, if subcomponents need to perform page jump and rollback operations, they need to be called through uni.navigateTo, uni.redirectTo and other methods. However, in some cases, subcomponents also need to perform a page rollback operation. In this case, the uni.navigateBack method can be used. To call the uni.navigateBack method in a subcomponent, you need to use the uni.$emit method for event triggering. For example, in a child component you can write:
this.$emit('back');
In the parent component, we need to listen to this event, and when the event is triggered, call the uni.navigateBack method to return the page.
<image @click="goback" class="familyReportarrow" src="/static/images/arrow.png" mode=""></image>
<script>
export default{
data(){
return{
}
},
methods:{
goback(){
console.log(111);
uni.navigateBack({
delta: 1
})
}
}
}
</script>