<wxc-navpage>
0.5 cn
Summary
The "wxc-navpage" tag implements a specialized component that contains a navbar at the top of the window and an embed content page. You can customize the navbar as you like. In addition, you can use navigator
module to control the page jump, see navigator module.
Child Components
This type of component supports all kinds of weex component as its child components.
Attributes
height
: <length> The height of the navbar. Default value is 88.background-color
: <color>The backgroudColor of the navbar. Default value iswhite
.title
: <string> The title of the navbar.title-color
: <color>The color of the navbar title. Default value isblack
.left-item-title
: <string> The title of the leftItem.left-item-color
: <color> The color of the leftItem title. Default value isblack
.right-item-title
: <string> The title of the rightItem.right-item-color
: <color> The color of the rightItem title. Default value isblack
.left-item-src
: <string> The imageURL of the leftItem you want to set.right-item-src
: <string> The imageURL of the rightItem you want to set.
Other attributes please check out the common attributes.
Styles
common styles: check out the common styles
- support flexbox related styles
- support box model related styles
- support
position
related styles - support
opacity
,background-color
etc.
Events
naviBar.leftItem.click
: triggered when the leftItem of navbar is clicked. You need to register the observer in ready or create block.naviBar.rightItem.click
: triggered when the rightItem of navbar is clicked. You need to register the observer in ready or create block.
common events: check out the common events
- support
click
event. Check out common events - support
appear
/disappear
event. Check out common events
Example
<template>
<wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
<content> ...</content>
</wxc-navpage>
</template>
<script>
require('weex-components');
module.exports = {
created: function() {
this.$on('naviBar.rightItem.click',function(e){
//handle your click event here.
});
this.$on('naviBar.leftItem.click',function(e){
//handle your click event here.
});
}
}
</script>