App-plus Object Sets the specific style to be compiled to the app platform. See app-Plus app below for configuration items

Refer to the address

Uniapp. Dcloud. IO/collocation…

App-plus configures a specific style for compiling to the APP platform. Some common configurations are also supported by the H5 platform. The following is a list of common configuration items. For more information, see WebviewStyles.

TitleNView Object navigation bar, see: navigation bar App, H5 subNVues Object Original form, see: original form App 1.9.10+ bounce String page bounce effect, set to “None” to disable the effect. App (nvue Android without page-level bounce effect, only list, recycle-list, waterfall and other rolling components have bounce effect) softinputNavBar String Auto iOS soft keyboard to complete the toolbar display mode, Close the toolbar when set to “None”. SoftinputMode String adjustPan Indicates that the soft keyboard is in adjustPan mode. AdjustResize and adjustPan App pullToRefresh Object Dropdown Refresh App scrollIndicator String Indicates the scroll bar display policy. When the value is set to “None”, the scroll bar is not displayed. App animationType String Pop-in window display animation, see: Window animation. App animationDuration Number 300 Specifies the duration of the animation displayed in the window, in ms. App

Tips

The NVUE page supports titleNView and pullToRefresh configurations. Other configuration items do not support the navigation bar

backgroundColor	String	#F7F7F7 Background color, the color value format is "#RRGGBB". Rgba format can also be set when using translucent title barsButtons Array Custom buttons. See Buttons pure nvue (render:native does not support titleColor String#000000 Title text colorTitleOverflow String Ellipsis Handle header text outside the display area."clip"- Clipping content beyond the display area;"ellipsis"- Out of the display area tail display ellipsis mark (...) . TitleText String titleText content titleSize String titleText sizetypeString Default Navigation bar style."default"- Default style;"transparent"- Scroll transparent gradient;"float"- Hover navigation bar. App-nvue 2.4.4+ Support tags Array native View enhancement, see: 5+ View control searchInput Object Native navigation box configuration, see: searchInput 1.6.0Copy the code

The native navigation bar can be disabled by setting navigationStyle to Custom or titleNView to false. Once native navigation is disabled, read the notes for custom navigation. TitleNView cannot be set to autoBackButton, homeButton, etc. When titleNView type is set to transparent, the navigation bar is a scrolling transparent gradient navigation bar. By default, there is only button, After scrolling, the background color and title text of the title bar will gradually appear. When type is float, the navigation bar is a floating title bar. In this case, the page content reaches the top of the screen, including the status bar, but the navigation bar floats over the top of the page. Generally, the background color of the navigation bar is set to RGBA translucent color. For titleNView type = transparent, app-nvue 2.4.4+ supports setting titleNView buttons to listen for button clicks. OnNavigationBarButtonTap, nvue weex compilation model reference: uni. After onNavigationBarButtonTap searchInput titleNView configuration, reference related event listeners: OnNavigationBarSearchInputChanged App, such as the primary navigation button if you use the fonts icon, pay attention to check whether the name of the font library (the font-family) using the default iconfont, this name is a reserved word, Cannot be used as the name of an imported font library. You need to change it to a custom name. Otherwise, it cannot be displayed.

Type String None Button style. The value can be: Background String Defaults to the grey, translucent background color of the button, This parameter is valid only when type=transparent in the title bar. BadgeText String Specifies the text to be displayed on the button. A maximum of three characters can be displayed. ColorPressed String Defaults to color property value automatically adjusts transparency to 0.3 Press status button text color Float String Right button to display position on title bar, The value can be “left” or “right” fontWeight String Indicates the text size on the normal button. The value can be “normal”, “standard”, “bold”, or “bold”. FontSize String Specifies the size of the text on the button. FontSrc String Specifies the font file path for the text on the button. Network addresses are not supported. Use local addresses. Select String false Whether to display the selection indicator icon (down arrow), often used for city selection text String button to display text. Unicode characters must start with ‘\u’ when using font ICONS, such as “\ue123” (note that “\e123” cannot be written). Width String 44px button width. Possible values are: “*px” – Logical pixel value. For example, “10px” indicates 10 logical pixels. The content of the button is displayed in the center; “Auto” – Automatically adjusts the width of the button according to the content

When styling a button with the type value, the fontSrc and text properties are ignored.

Forward button Back Button Share Button Favorite button Home button Menu button Close Close button None None Set the content displayed on the text property button, and set the font library to use through the fontSrc property. Search box configuration searchInput places search boxes on titleNView’s native navigation bar. Its width ADAPTS to the surrounding elements.

AutoFocus Boolean False Whether to automatically obtain the focus align String Center Specifies the text alignment mode in the non-input state. Possible values: “left” – left aligned; “Right” – aligned to the right; “Center” – center aligned. BorderRadius String 0px Rounded radius of the input box. The value format is “XXpx”, where XX is the pixel value (logical pixel). RPX is not supported. Placeholder String Hint text. PlaceholderColor String #CCCCCC Text color disabled Boolean false Specifies whether to query

searchInput Tips

SearchInput click input box onNavigationBarSearchInputClicked onNavigationBarSearchInpu onNavigationBarSearchInputChanged, text changes, click the search button TConfirmed, see documentation page Life Cycle.

The contents of the input box can be obtained with the parameter E.ext during the life cycle. To dynamically modify searchInput or to obtain placeHold for searchInput, refer to Uni-App to dynamically modify the app navigation bar

How to use VUex in UNI-App

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
})
export default store
Copy the code
import Vue from 'vue'
import App from './App'// Vuex import store from'./store'// Define vuex as a global component vue.prototype.$store = store
Vue.config.productionTip = false

App.mpType = 'app'const app = new Vue({ ... App, // Mount store}) App.$mount(a)Copy the code

Use Vuex in a single page

<script>
    export default {
        created () {
            console.log(this.$store)
        }
    }
</script>
Copy the code

First enter the application for the unknown state — — — — — – > login — — — — — — — — — – > close the application, open again — — — — — — — — — > to logged-in status

Traditional applications maintain login status by reading cookies to determine whether they are logged in

Uni-app does not support reading and writing cookies. Because the body of the Uni-App framework is VUE, vuEX can be used for login state management.

Box-sizing is small program style

Box-sizing is set to border-box, which counts the border and padding within width

There are only border-box and the default content-box in the applet, which means that even if it is designed as a padding-box, the content-box is still displayed by default

❤️ Don’t forget to leave your learning footprints.

The author Info:

[author] : Jeskson [original public number] : Dadafront-end [welfare] : public number reply “data” to send self-study material gift package (into the group to share, want what to say ha, see if I have)! [reproduced description] : reproduced please explain the source, thank you for your cooperation! ~

Big front-end development, positioning front-end development technology stack blog, PHP background knowledge, web full stack technology field, data structure and algorithm, network principle and so on easy to understand the presentation to partners. Thank you for your support and kindness!!

If this number of content can not do the place (such as: related to copyright or other issues), please contact us for rectification, will be dealt with in the first time.

Thumb up, please! Because your approval/encouragement is my biggest motivation to write!

Welcome to attentiondadaCSDN!

This is a blog with quality and attitude