weex 小结 --官方扩展组件

 <wxc-tabbar>  页面底部的 tab 标签，通过点击在不同页面之间切换

属性：

• selected-index {number}：设置默认选中的 tab 索引，默认值为 0（第一个 tab）。
• selected-color {color}：设置当标题被选中时标题的颜色，默认为红色。
• unselected-color {color}：设置当标题不被选中时标题的颜色，默认为黑色。
• tab-items {Array[Object]}：该属性接受一个 tabitems 对象数组, 分别对应到对应的 tab 页面，tab页面的顺序跟对象数组的位置对应。 我们可以通过设置每一项的属性来配置 tabbar 的外观：
  • index {integer}：必填属性，指明了 tabitem 的次序。
  • title {string}：设置 tabitem 的标题，非必填，当标题为空时，标题将不会被显示
  • titleColor {color}：设置 tabitem 的标题颜色，默认是黑色
  • image {string}：当 tab 页面不被选中时显示的 icon，当不提供时，什么也不显示。
  • selectedImage {string}：设置 tab 页面被选中时显示的图片，不提供图片时，什么也不显示。
  • src {string}：设置 tab 对应的 Weex 页面的 url，为 http 开头。
  • visibility {string}：值为 visible | hidden，该属性指明了 tab 页面的显示状态，默认值是 visible

    tabItems: [
            {
              index: 0,
              title: 'tab1',
              titleColor: '#000000',
              icon: '',
              image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
              selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
              src: 'http://dotwe.org/raw/dist/ba202bcd277285c7f3cf79f9b1055dce.js?itemId=tab1',
              visibility: 'visible',
            },
            {
              index: 1,
              title: 'tab2',
              titleColor: '#000000',
              icon: '',
              image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
              selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
              src: 'http://dotwe.org/raw/dist/7e24b83c5868dbd4462e30549999245d.js?itemId=tab2',
              visibility: 'hidden',
            }],
    

注意：需要在 created,或者是 ready 方法中进行注册才可以响应点击事件，在不同页面之间进行切换

 created: function() {
      var vm = this;
      vm.$on('tabBar.onClick',function(e){
        var detail= e.detail;
        console.log('tabBar.onClick ' + detail.index);
      });
    },

 

<wxc-navpage> 页面头部的标题栏

• height {number}：navbar 的高度，默认是 88。

• background-color {color}：navbar 的背景颜色，默认是白色。

• title {string}：navbar 的标题。

• title-color {color}：navbar 标题的颜色，默认黑色。

• left-item-title {string}：navbar 左侧按钮的标题。

• left-item-color {color}：navbar 左侧按钮标题颜色，默认黑色。

• right-item-title {string}：navbar 右侧按钮标题。

• right-item-color {color}：navbar 右侧按钮标题颜色，默认黑色。

• left-item-src {string}：navbar 左侧按钮的图标。

• right-item-src {string}：navbar 右侧按钮的图标。

<wxc-navpage class="nav" 
background-color="#cccccc" 
title="啦啦啦" title-color="#ff00ff" 
right-item-title="dingdong" 
right-item-color="#ff0000" 
left-item-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2192841312,1420710418&fm=116&gp=0.jpg">

 注意:左侧，右侧按钮的点击事件，需要在 created,或者是 ready 方法中注册才可以响应

 created: function() {
      this.$on('naviBar.rightItem.click',function(e){
       var duration = 2;
        modal.toast({'message': 'naviBar.rightItem.click','doation': duration
          });
      });

      this.$on('naviBar.leftItem.click',function(e){
      var  duration = 2;
        modal.toast({'message': 'naviBar.leftItem.click','doation': duration});
      });
    },