Weex 標簽控件

1.滾動組件

<template>
  <scroller>
    <div repeat="{{list}}">
      <text>{{name}}: ${{price}}</text>
    </div>
  </scroller>
</template>

<script>
  module.exports = {
    data: {
      list: [
        {name: '...', price: 100},
        {name: '...', price: 500},
        {name: '...', price: 1.5},
        ...
      ]
    }
  }
</script>

2.輸入框

type：text, password, url, email, tel etc，W3C標准

value：默認值

placeholder：占位符

disabled：一個布爾屬性表明交互的表單控件不可用。特別是,點擊事件不會派遣禁用控件

autofocus：一個布爾屬性允許指定一個表單控制頁面加載時應該有輸入焦點

事件：

• input: 元素值變化事件.
• change: 用戶輸入值變化事件，總是在blur事件之后.
• focus: 組件獲取到焦點的事件.
• blur: 元素失去焦點事件.

<div>
  <input
    type="url"
    autofocus="true"
    placeholder="..."
    value="http://alibaba.github.io/weex/"
    style="placeholder-color: #666666;">
  </input>
</div>

3.switch

checked:默認值（true，false）

事件：

click：點擊事件

<div>
  <text>muted:</text>
  <switch checked="true"></switch>
</div>

4.video

屬性

• src: <string> 影片鏈接.
• play-status: <boolean> play | pause. 控制影片播放或者暫停，默認是暫停.
• auto-play: <boolean> true | false. 自動播放控制，初始狀態為不播放.

事件

• start: 觸發播放事件.
• pause: 觸發暫停事件.
• finish: 播放完畢事件.
• fail: 無法播放事件.

<div>
    <video class="video" auto-play="true" play-status="play" src="..." style="width:500;height:500;"></video>
</div>

 5.a

<a href="http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js">
   <text>Click me to see how 'A' element opens a new world.</text>
</a>

 

6.web

屬性

• src: <string>加載URL地址.

事件

• pagestart: 頁面開始加載時事件.
• pagefinish: 頁面加載完成時事件.
• error: 頁面加載異常事件.

<div>
  <web style="width=...; height=...;" src="..."     onpagestart="pagestart" onpagefinish="pagefinish"     onerror="error">
  </web>
</div>

 

7.wxc-tabbar

描述

"wxc-tabbar”標簽實現了一個專門的組件對應於radio-style選擇。它顯示選項卡底部的窗口用於選擇不同的模式和顯示之間的不同weex頁模式。

屬性

tab-items

這個屬性包含tab-item對象數組,其中每個對應於radio-style選擇。在這個屬性的順序對應於屏幕上物品的順序。您可以配置tab-item tabbar的外觀設置。每個tabitem屬性可以描述如下

• index: <integer> 索引，排序.
• title: <string> 標題，為空不顯示.
• titleColor: <color>標題顏色，默認為黑色.
• image: <string> 未選中時的圖像，為空不顯示.
• selectedImage: <string> 選中時的圖像，為空不顯示.
• src: <string> 頁面需要顯示的內容.
icon: <string>.
• visibility: <string>visible | hidden.

<template>
  <div style="flex-direction: column;">
    <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
  </div>
</template>

<script>
  require('weex-components');
  module.exports = {
    data: {
      dir: 'examples',
      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: 'component/tabbar/tabbar-item.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: 'component/tabbar/tabbar-item.js?itemId=tab2',
          visibility: 'visible',
        },
        {
          index: 2,
          title: 'tab3',
          titleColor: '#000000',
          icon: '',
          image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
          selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
          src: 'component/tabbar/tabbar-item.js?itemId=tab3',
          visibility: 'visible',
        }
      ],
    }
  }
</script>

 

 

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