From 7467a30020a3d235e98e7c66a1f225e02b756d03 Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Sat, 16 Dec 2017 20:57:25 +0800
Subject: [PATCH] =?UTF-8?q?[bug=20fix]=20Tab:=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E4=B8=8D=E6=BB=9A=E5=8A=A8=E6=83=85=E5=86=B5=E4=B8=8B=EF=BC=8C?=
=?UTF-8?q?=E6=96=87=E5=AD=97=E8=BF=87=E9=95=BF=E6=98=BE=E7=A4=BA=E9=97=AE?=
=?UTF-8?q?=E9=A2=98=20(#81)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* format code
* 更改传参方式 && 增加无滚动时文字过长处理
* 增加 helper 文档
* update helper doc
* update helper doc
---
example/pages/tab/index.js | 5 ++-
example/pages/tab/index.wxml | 12 +++++--
packages/helper/README.md | 70 +++++++++++++++++++++++++++++++++++-
packages/tab/README.md | 56 +++++++++++++++--------------
packages/tab/index.pcss | 16 +++++----
packages/tab/index.wxml | 44 +++++++++++++----------
6 files changed, 143 insertions(+), 60 deletions(-)
diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js
index 3fce2d04..3da705be 100644
--- a/example/pages/tab/index.js
+++ b/example/pages/tab/index.js
@@ -17,10 +17,9 @@ Page(Object.assign({}, Zan.Tab, {
title: '待收货'
}, {
id: 'sign',
- title: '已完成'
+ title: '已完成订单'
}],
- selectedId: 'all',
- scroll: false
+ selectedId: 'all'
},
tab2: {
list: [{
diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml
index b606274d..f760c266 100644
--- a/example/pages/tab/index.wxml
+++ b/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>
diff --git a/packages/helper/README.md b/packages/helper/README.md
index 07334276..5f54f3a1 100644
--- a/packages/helper/README.md
+++ b/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` 文字过长点点点显示，最多显示三行
diff --git a/packages/tab/README.md b/packages/tab/README.md
index 19004985..948dd188 100644
--- a/packages/tab/README.md
+++ b/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 项 id
+ id: 'all',
+ // tab 项展示文案
+ title: '全部'
+}, {
+ id: 'topay',
+ title: '待付款'
+}, {
+ id: 'tosend',
+ title: '待发货'
+}, {
+ id: 'send',
+ title: '待收货'
+}, {
+ id: 'sign',
+ title: '已完成'
+}]
```
当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
diff --git a/packages/tab/index.pcss b/packages/tab/index.pcss
index 5b1e18e1..c0d492fa 100644
--- a/packages/tab/index.pcss
+++ b/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;
-}
diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml
index 628d1a60..6ece0e42 100644
--- a/packages/tab/index.wxml
+++ b/packages/tab/index.wxml
@@ -1,31 +1,37 @@
<template name="zan-tab">
<view class="zan-tab">
- <block wx:if="{{tab.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' }}"
- >
- <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
- </scroll-view>
- </block>
- <block wx:else>
- <view class="zan-tab__bd {{fixed ? 'zan-tab__bd--fixed' : ''}}">
- <template is="zan-tab-list" data="{{ tab, componentId }}"></template>
- </view>
- </block>
+ <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 || height ? ((tab.height || height) + 'px') : 'auto' }}"
+ >
+ <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' : '' }}">
+ <template
+ is="zan-tab-list"
+ data="{{ list: tab.list || list, selectedId: tab.selectedId || selectedId, componentId }}">
+ </template>
+ </view>
+ </block>
</view>
</template>
<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' : ''}}"
- data-component-id="{{componentId}}"
- data-item-id="{{item.id}}"
+ class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
+ data-component-id="{{ componentId }}"
+ 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>