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});
      });
    },