wxc-tab

    0.1.2 • Public • Published

    wxc-tab

    一个简单的 Weex 版本 Tab 切换控件

    Demo 预览

    Weex 预览:旅客android/ios端扫码

    H5 预览:直接访问或扫码

    Get Started

    一,npm 安装包

    npm install wxc-tab
    

    二,引用

    require('wxc-tab/src/pages/wxc-tab.we');
    

    三,Hello World

    写一个最简单的Demo

    <template>
    	<wxc-tab id="SimpleTab" content-height=200 >
    		<div id="simpleTab1">
    			<Text>Tab A</Text>
    		</div>
    		<div id="simpleTab2">
    			<Text>Tab B</Text>
    		</div>
    	</wxc-tab>
    </template>
    <script>
    require('wxc-tab/src/pages/wxc-tab.we');
    module.exports = {
    	data: {
    		navItems:[],
    	},
    	ready: function () {
    		// 初始化 SimpleTab
    		this.$vm('SimpleTab').renderData([
    			{
    				title:"tab A",
    				pannelElement:this.$el('simpleTab1')
    			},
    			{
    				title:"tab B",
    				pannelElement:this.$el('simpleTab2')
    			}
    		]);
    }
    </script>
    

    Useage

    1,Template 基本结构

    这是一段调用 wxc-tab 的基本结构:

    <wxc-tab id="SimpleTab" content-height=200 >
    	<div id="simpleTab1">
    		<Text>Tab A</Text>
    	</div>
    	<div id="simpleTab2">
    		<Text>Tab B</Text>
    	</div>
    </wxc-tab>
    

    wxc-tab 封装了标签切换的基本动作,自动关联了 Tab 和切换面板,使用简单方便。因为涉及到大段的<content></content>传入,所以组件的初始化入参没有从module.exports.data通过数据绑定传入,是在整个wxc-tab基本结构渲染 Ready 后再灌入数据,包括附着在wxc-tab里的整段<content></content>,因此,组件必须要带有一个id(SimpleTab)以备 js 中初始化用。

    上面这段代码中,simpleTab1simpleTab2分别表示了要切换的两个面板内容,面板内容可以提前初始化好。

    2,wxc-tab 标签入参

    wxc-tab 支持全部参数:

    <wxc-tab
    	tab-nav-lass='tab-nav'
    	tab-item-class='tab-item'
    	tab-index=0
    	border-bottom-color='red'
    	selected-font-color='black'
    	selected-font-size=32
    	font-color='black'
    	font-size=32
    	content-height=200
    ></wxc>
    

    参数说明

    • tab-nav-class:(string)tab 导航容器的className,一般默认即可,不用传值
    • tab-item-class:(string)tab 导航选项卡的className,一般默认即可,不用传值
    • tab-index:(number)默认展开第几个,从0计数,默认为0
    • border-bottom-color:(string)Tab 选项卡底纹颜色,默认为rgb(0, 159, 240)
    • selected-font-color:(string)选中后的 Tab 文字颜色,默认为black
    • selected-font-size:(number)选中后的Tab文字大小,默认为32
    • font-color:(string)Tab文字颜色,默认为black
    • font-size:(number)Tab文字大小,默认为32
    • content-height:(number)pannel容器高度,无默认值,需要手工传入

    3,样式说明

    需要切换的几个面板需要设置position:absolute,wxc-tab-pannel 面板容器通常需要固定高度,所以content-height参数是一定需要传入的。

    weex 有一个 bug,就是position:absolute情况下,Dom 的宽度设为100%不生效,需要 js 计算好宽度赋值,或者直接写死。可以用 env.deviceWidth 辅助设置宽度(env.deviceWidth 也有bug)。

    4,js 代码初始化

    template中摆放好面板之后,需要在js里初始化,必须在 ready 入口里做初始化。初始化方法:

    // 一个简单的例子
    this.$vm('SimpleTab').renderData([
    	{
    		title:"tab A",
    		pannelElement:this.$el('simpleTab1')
    	},
    	{
    		title:"tab B",
    		pannelElement:this.$el('simpleTab2')
    	}
    ]);
    

    这里初始化主要传入一个数组,用来渲染 Tab 选项卡,并将选项卡和对应的 Tab 面板做关联。参数说明:

    • title:(string)Tab 要显示的文案
    • pannelElement:this:(object)对应的面板 vDom 节点,由于 Weex 做不到传一个文本结构的 template 给子组件,所以必须传一个索引过去
    • lazyExecCallback:(function)延迟执行的函数,当高亮到当前选项卡时执行,只执行一次。

    延迟执行的 Example:

    {
    	title:'Tab C', 
    	pannelElement:this.$el('LazyExecContent3'),
    	lazyExecCallback:function(){
    		// 这里 this 指向当前组件实例
    	}
    }
    

    5. wxc-tab 实例 API

    • renderData: function(navItems,index),灌入数据并渲染,navItems 是一个数组对象,index 是渲染第几个,可以不写
    • selected: function(index),高亮第 index 个tab,从 0 计数 0,1,2,...
    • clickTab:function(e),点击 Tab 的回调事件,将事件对象带回

    Example 源码


    组件开发&调试

    先 checkout 工程

    1. tnpm i 安装依赖 Node 包
    2. bower i 安装依赖 bower 模块

    开发 & 调试

    开启本地服务:

    grunt dev
    

    本地启动服务,直接打开浏览器,可以直接 Web 预览。Weex 端预览需要将手机绑定本机ip(8080端口),用旅客ios/andoird扫码:

    扫码地址:

    https://www.alitrip.com/?_wx_tpl=http://dev.waptest.taobao.com/src/pages/demo/index.js
    

    源码

    • 源码pages/wxc-tab.we
    • Demo 入口文件pages/demo/index.we

    构建打包

    遵照传统clam规范:

    grunt               执行默认全部构建, 包括在线构建和离线包构建
    

    部署

    grunt prepub        发布到日常环境 CDN,包含构建打包操作
    grunt publish       发布到线上环境 CDN
    

    grunt tasks

                   prepub  clam 预发                                                 
                  publish  clam 正式发布                                               
                     demo  开启Demo调试模式                                              
                      dev  开启 Dev 开发模式                                             
                    debug  开启 dev 调试模式                                             
                    daily  替换域名引用到daily                                            
       build_offline_trip  构建去啊客户端离线包                                              
     build_offline_taobao  构建手淘客户端离线包                                              
     build_offline_alipay  构建支付宝钱包客户端离线包                                           
     offline_build_router  构建离线包目标容器选择处理                                           
               exec_build  执行构建脚本                                                  
                    build  默认构建流程                                                  
                     sync  同步 grunt 任务默认配置                                         
                     push  推送本地文件到客户端                                              
                newbranch  获取当前最大版本号,创建新的分支                                        
                newabtest  获取当前最大版本号,创建新的abtest分支                                  
                pubabtest  发布 abtest                                               
               exitabtest  退出 abtest                                               
                  default  Clam 默认流程 
    

    命令帮助:yo clam:h

    changeLog

    • 0.1.1 初始版本提交
    • 0.1.2 Readme文档和 bugfix

    Keywords

    Install

    npm i wxc-tab

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    none

    Last publish

    Collaborators

    • bachi