<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 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

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>

results matching ""

    No results matching ""