1.5.4.18 wxc-navpage

<wxc-navpage>

0.5

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 is white.
title: <string> The title of the navbar.
title-color: <color>The color of the navbar title. Default value is black.
left-item-title: <string> The title of the leftItem.
left-item-color: <color> The color of the leftItem title. Default value is black.
right-item-title: <string> The title of the rightItem.
right-item-color: <color> The color of the rightItem title. Default value is black.
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>