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 页面的显示状态,默认值是 visibletabItems: [
{
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});
});
},
weex 小结 --官方扩展组件的更多相关文章
- Android官方架构组件指南
此指南适用于那些曾经或现在进行Android应用的基础开发,并希望了解和学习编写Android程序的最佳实践和架构.通过学习来构建强大的生产级别的应用. 注意:此指南默认你对Android开发有比较深 ...
- 改造 Android 官方架构组件 ViewModel
前言 Android 官方架构组件在今年 5 月份 Google I/O 大会上被公布, 直到 11 月份一直都是测试版, 由于工作比较繁忙, 期间我只是看过类似的文章, 但没有在实际项目中使用过, ...
- easyUI扩展组件
$.parser.plugins.push("aa"); //注册扩展组件 $.fn.aa= function (options, param) {//定义扩展组件 //当opti ...
- MEF(Managed Extensibility Framework)有选择性地使用扩展组件
在"MEF(Managed Extensibility Framework)使用全部扩展组件"中,客户端应用程序调用了所有的扩展组件,而且如果有新的扩展组件加入,必须先关闭程序,再 ...
- MEF(Managed Extensibility Framework)使用全部扩展组件
MEF(Managed Extensibility Framework),所在命名空间是System.ComponentModel.Composition.dll.简单来说,MEF是将符合约定(一般是 ...
- 【Android】10.1 扩展组件库和其他视图--本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-18 1.主界面运行截图 2.MainActivity.cs文件中对应的代码 chItems.Add(new Chapter() ...
- Android官方架构组件介绍之LifeCycle(一)
Android官方架构组件介绍之LifeCycle 下面是官方提供的Android App开发的架构图: 从上图可以看到一些关键字:ViewModel,LiveData,Room等.其实看了上面视频的 ...
- easyui基于 layui.laydate日期扩展组件
本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...
- 微信小程序使用weui扩展组件踩坑
最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入 ...
随机推荐
- 无语啊,sublime给我弄乱玩,玩坏了,而且安装插件也安装不了
国内的什么插件地址都TMMD失效了,没办法,只能翻"强"到外面找了,而且找了很多也用不了,所以收藏一个为了预防以后不行有补救的方法: 百度的99%都不行,不是报这个错就是那个错,可 ...
- 卸载Centos自带open-jdk
1.rpm查看安装文件 rpm -qa|grep java 2,切换到root用户,卸载 rpm -e --nodeps java-1.7.0-openjdk-headless-1.7.0.75-2. ...
- Mvc4中使用Spring.Net实现IOC和DI
一个Hello类,一个IHello接口 1.引用dll 2.修改Global文件 (SpringMvcApplication) 3.控制器添加属性 4.WebConfig配置 5.Spring.xml ...
- 初始化datetimepicker的时候就报了js异常
全栈眼中的http这一章分别从前端视角和后端视角来分析前后端所关注的侧重点.前端可以通过抓包工具或者chrome devtools 查看每个请求,同域下的资源请求数量等来找出优化点,更关注的是一个页面 ...
- 关于wamp5中(apache)设置虚拟主机
找了很多文章,但是很多对于最新的apache都已经过时无法生效了. http://blog.csdn.net/yuluo727282752/article/details/6944359 这篇文章写得 ...
- Hiho 1232 北京网络赛 F Couple Trees
给两颗标号从1...n的树,保证标号小的点一定在上面.每次询问A树上的x点,和B树上的y点同时向上走,最近的相遇点和x,y到这个点的距离. 比赛的时候想用倍增LCA做,但写渣了....后来看到题解是主 ...
- 我认识的log4j开源日志
Log4j 在java中如何配置log4j!! 步骤: ①引入jar包,推荐新建一个lib文件夹,用来装所有的jar包(还要进行下图内的操作) 之后项目中就会多出一个引入外部Library的项目 ②创 ...
- python 内置函数!
chr 数字转换字母 r = chr(65)print(r) ord字母转换数字n = ord("A")print(n) random 函数 import random li = ...
- eclipse安装Veloeclipse
step 1.Help-->install new software-->Add Name:Veloeclipse Value:http://veloeclipse.googlecode. ...
- iOS开发,URL编码和解码
URL传递数据中,如果含有中文,需要进行编码: NSString *urlEncodeString = [urlStr stringByAddingPercentEncodingWithAllowed ...