[bug fix] Tab: 修复不滚动情况下，文字过长显示问题 (#81)

* format code

* 更改传参方式 && 增加无滚动时文字过长处理

* 增加 helper 文档

* update helper doc

* update helper doc

example/pages/tab/index.js

@@ -17,10 +17,9 @@ Page(Object.assign({}, Zan.Tab, {
         title: '待收货'
       }, {
         id: 'sign',
-        title: '已完成'
+        title: '已完成订单'
       }],
-      selectedId: 'all',
+      selectedId: 'all'
-      scroll: false
     },
     tab2: {
       list: [{

example/pages/tab/index.wxml

@@ -5,12 +5,18 @@
   <view class="doc-title">TAB</view>
 
   <view style="margin: 20px 0">
-    <template is="zan-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
+    <template
+      is="zan-tab"
+      data="{{ ...tab1, componentId: 'tab1' }}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="zan-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
+    <template
+      is="zan-tab"
+      data="{{ ...tab2, componentId: 'tab2' }}"></template>
   </view>
   <view style="margin: 20px 0">
-    <template is="zan-tab" data="{{tab: tab3, componentId: 'tab3'}}"></template>
+    <template
+      is="zan-tab"
+      data="{{ ...tab3, componentId: 'tab3' }}"></template>
   </view>
 </view>

packages/helper/README.md

@@ -1,3 +1,71 @@
 ## Helper 基础样式
 
-文档补充中
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+直接在元素上增加指定 class 即可
+```html
+<view class="zan-pull-right">zan-pull-right: 往右靠</view>
+```
+
+具体可用类名如下：
+
+**字体大小**
+
+`zan-font-8` 文字以8像素大小展示
+
+`zan-font-10` 文字以10像素大小展示
+
+`zan-font-12` 文字以12像素大小展示
+
+`zan-font-14` 文字以14像素大小展示
+
+`zan-font-16` 文字以16像素大小展示
+
+`zan-font-18` 文字以18像素大小展示
+
+`zan-font-20` 文字以20像素大小展示
+
+`zan-font-22` 文字以22像素大小展示
+
+`zan-font-24` 文字以24像素大小展示
+
+`zan-font-30` 文字以30像素大小展示
+
+**字体颜色**
+
+`zan-c-red` 文字以红色展示
+
+`zan-c-gray` 文字以浅灰色展示
+
+`zan-c-gray-dark` 文字以灰色展示
+
+`zan-c-gray-darker` 文字以深灰色展示
+
+`zan-c-black` 文字以黑色展示
+
+`zan-c-blue` 文字以蓝色展示
+
+`zan-c-green` 文字以绿色展示
+
+**字体样式**
+
+`zan-pull-right` 文字往右靠
+
+`zan-text-deleted` 文字显示删除效果
+
+`zan-font-bold` 文字加粗显示
+
+**其他**
+
+`zan-arrow` 展示向右侧箭头，以 absolute 布局，需要在外层加上 relative 来定位
+
+`zan-ellipsis` 文字过长点点点显示
+
+`zan-ellipsis--l2` 文字过长点点点显示，最多显示两行
+
+`zan-ellipsis--l3` 文字过长点点点显示，最多显示三行

packages/tab/README.md

@@ -22,35 +22,37 @@ Page(Object.assign({}, Tab, {
 ### 代码演示
 在模板中使用 zan-tab 模板，并传入相应数据
 ```html
-<template is="zan-tab" data="{{ tab: tab1, componentId: 'tab1' }}"></template>
+<template is="zan-tab" data="{{ list, selectedId: '', componentId: 'tab1' }}"></template>
 ```
-tab 的数据格式如下
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| list | tab 列表 | Array | - | |
+| selectedId | 当前被选中 tab 项的 id | String | - | |
+| scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
+| componentId | 用于区分页面多个 tab 组件 | String | - | |
+
+
+tab 组件中，list 数据格式如下
 ```js
-{
+[{
-  // tab 数据列表
-  list: [{
   // tab 项 id
   id: 'all',
   // tab 项展示文案
   title: '全部'
-  }, {
+}, {
   id: 'topay',
   title: '待付款'
-  }, {
+}, {
   id: 'tosend',
   title: '待发货'
-  }, {
+}, {
   id: 'send',
   title: '待收货'
-  }, {
+}, {
   id: 'sign',
   title: '已完成'
-  }],
+}]
-  // 当前选中的 tab 项，以 tab 的 id 进行匹配
-  selectedId: 'all',
-  // 是否开启左右滑动类型的 tab
-  scroll: false
-}
 ```
 
 当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听

packages/tab/index.pcss

@@ -16,19 +16,24 @@
 .zan-tab__item {
   flex: 1;
   display: inline-block;
-  text-align: center;
+  padding: 0 10px;
+  line-height: 0;
   box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
 }
 
 .zan-tab__title {
-  font-size: 14px;
   display: inline-block;
-  color: #666;
+  max-width: 100%;
   height: 44px;
   line-height: 44px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   box-sizing: border-box;
-  margin: 0 10px;
   word-break: keep-all;
+  font-size: 14px;
+  color: #666;
 }
 
 .zan-tab__item--selected .zan-tab__title {
@@ -43,6 +48,3 @@
 .zan-tab__bd--scroll .zan-tab__item {
   min-width: 80px;
 }
-.zan-tab__bd--scroll .zan-tab__text {
-  margin: 0 20px;
-}

packages/tab/index.wxml

@@ -1,17 +1,23 @@
 <template name="zan-tab">
   <view class="zan-tab">
-      <block wx:if="{{tab.scroll}}">
+    <block wx:if="{{ tab.scroll || scroll }}">
       <scroll-view
         class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
         scroll-x="true"
-          style="height: {{ tab.height ? tab.height + 'px' : 'auto' }}"
+        style="height: {{ tab.height || height ? ((tab.height || height) + 'px') : 'auto' }}"
       >
-          <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
+        <template
+          is="zan-tab-list"
+          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
+        </template>
       </scroll-view>
     </block>
     <block wx:else>
-        <view class="zan-tab__bd {{fixed ? 'zan-tab__bd--fixed' : ''}}">
+      <view class="zan-tab__bd {{ fixed ? 'zan-tab__bd--fixed' : '' }}">
-          <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
+        <template
+          is="zan-tab-list"
+          data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
+        </template>
       </view>
     </block>
   </view>
@@ -19,13 +25,13 @@
 
 <template name="zan-tab-list">
   <view
-    wx:for="{{tab.list}}"
+    wx:for="{{ list }}"
     wx:key="id"
-    class="zan-tab__item {{tab.selectedId == item.id ? 'zan-tab__item--selected' : ''}}"
+    class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
-    data-component-id="{{componentId}}"
+    data-component-id="{{ componentId }}"
-    data-item-id="{{item.id}}"
+    data-item-id="{{ item.id }}"
     bindtap="_handleZanTabChange"
   >
-    <view class="zan-tab__title">{{item.title}}</view>
+    <view class="zan-tab__title">{{ item.title }}</view>
   </view>
 </template>