摘要：
它显示选项卡底部的窗口用于选择不同的模式和显示之间的不同weex页模式。属性tab-items这个属性包含tab-item对象数组,其中每个对应于radio-style选择。您可以配置tab-itemtabbar的外观设置。每个tabitem属性可以描述如下index:索引，排序.title:标题，为空不显示.titleColor:标题颜色，默认为黑色.image:未选中时的图像，为空不显示.selectedImage:选中时的图像，为空不显示.src:页面需要显示的内容.icon:.visibility:visible|hidden.require;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?
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,teletc，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="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>