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> 页面需要显示的内容.
- visibility: <string>
visible
|hidden
.
icon: <string>.
<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>
Weex 标签控件的更多相关文章
- 基于duilib实现的可滑动tab标签控件
最近一直在忙棋牌游戏大厅的开发,使用了duilib界面库,在大厅界面游戏菜单的展现上需要用到滑动的效果,类似悠扬棋牌,jj棋牌的菜单左右(上下)滑动的效果.通过自己的设计思路完善了一个可滑动的tab标 ...
- Android 标签控件
版本号:1.0 日期:2014.7.24 版权:© 2014 kince 转载注明出处 在有的应用中可能须要设置一些标签来方便用去去查询某些信息,比方手机助手或者购物软件之类都会有一些标签. ...
- DS标签控件文本解析格式
DS标签控件使用DSL文本渲染引擎,支持DSL引擎代码.目前支持代码如下: <b>粗体</b> 以粗体显示 <i>斜体</i> 以斜体显示 <u& ...
- ActiveReports 报表控件V12新特性 -- 文本框和标签控件的浓缩
ActiveReports是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...
- Android控件进阶-自定义流式布局和热门标签控件
技术:Android+java 概述 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧,类 ...
- VS2010/MFC编程入门之三十三(常用控件:标签控件Tab Control 下)
上一节中鸡啄米讲了标签控件知识的上半部分,本节继续讲下半部分. 标签控件的创建 MFC为标签控件的操作提供了CTabCtrl类. 与之前的控件类似,创建标签控件可以在对话框模板中直接拖入Tab Con ...
- VS2010/MFC编程入门之三十二(常用控件:标签控件Tab Control 上)
前面两节鸡啄米讲了树形控件Tree Control,本节开始讲解标签控件Tab Control,也可以称为选项卡控件. 标签控件简介 标签控件也比较常见.它可以把多个页面集成到一个窗口中,每个页面对应 ...
- Kotlin 第一弹:自定义 ViewGroup 实现流式标签控件
古人学问无遗力, 少壮工夫老始成.纸上得来终觉浅, 绝知此事要躬行. – 陆游 <冬夜读书示子聿> 上周 Google I/O 大会的召开,宣布了 Kotlin 语言正式成为了官方开发语言 ...
- 能够附加图片的标签控件iOS项目源码
这个源码案例是能够附加图片的标签控件,源码JTImageLabel,JTImageLabel能够附加图片的标签Label控件,图片可以随意更换.位置也能够很好的控制.效果图: <ignore_j ...
随机推荐
- nutch 采集效率问题
http://hi.baidu.com/jacklin/item/a8fbccf479f6a1d042c36a7c再附一篇:http://blog.csdn.net/laigood/article/d ...
- jquery学会的
1.$("#id") $("xxxxx") (input, body) $(".class") 2. $("#id xxx ...
- 【NOIP 2011】 观光公交
题目描述 Description 风景迷人的小城 Y 市,拥有n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第0 分钟出现在1号 ...
- python处理csv数据
import csv #从文件读取 reader = csv.reader(file(srcFilePath,'rb')) for line in reader: #忽略第一行 if reader.l ...
- 如何测试 Android 中的定时事件
测试定时事件不太容易,比如要测试 AlarmManager 中定时明天4点的一个事件,你总不能等到明天4点再看看吧. Roman Nurik 提供了两个用来测试定时事件的命令:adb shell du ...
- win7 下与mac虚拟机的共享文件的建立
1. 确保针对Mac虚拟机的VMware Tools的安装 加载进入系统后,在mac里可看到安装和卸载vmware tools的两个图标(点开vmware tools磁盘),点安装的就可以了. 2. ...
- xlslib安装, aclocal-1.13: command not found, 安装升级autoconf-2.65.tar.gz, automake-1.13.tar.gz两个文件
问题1: $ make CDPATH="${ZSH_VERSION+.}:" && cd . && aclocal-1.13 -I m4 /bin/ ...
- [FJSC2014]折线统计
[题目描述] 二维平面上有n 个点(xi, yi),现在这些点中取若干点构成一个集合S,对它们按照x 坐标排序,顺次连接,将会构成一些连续上升.下降的折线,设其数量为f(S).如下图中,1->2 ...
- 数据结构(平衡树,树分治,暴力重构):WC 2014 紫荆花之恋
[题目描述] 强强和萌萌是一对好朋友.有一天他们在外面闲逛,突然看到前方有一棵紫荆树.这已经是紫荆花飞舞的季节了,无数的花瓣以肉眼可见的速度从紫荆树上长了出来. 仔细看看的话,这棵大树实际上是一个带权 ...
- vs默认的app.config是哪个?
一:这次是进一步的三层构架,不过还是没有业务逻辑层,但有单独的层的文件夹,解决方案资源管理器图如下: 二:operatorDAl.cs代码: using System; using System.Co ...