mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[bug fix] Tab: 修复不滚动情况下，文字过长显示问题 (#81)
* format code * 更改传参方式 && 增加无滚动时文字过长处理 * 增加 helper 文档 * update helper doc * update helper doc
This commit is contained in:
Yao
GitHub
parent
a96d1b25fc
commit
7467a30020
@ -17,10 +17,9 @@ Page(Object.assign({}, Zan.Tab, {
|
||||
title: '待收货'
|
||||
}, {
|
||||
id: 'sign',
|
||||
title: '已完成'
|
||||
title: '已完成订单'
|
||||
}],
|
||||
selectedId: 'all',
|
||||
scroll: false
|
||||
selectedId: 'all'
|
||||
},
|
||||
tab2: {
|
||||
list: [{
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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` 文字过长点点点显示，最多显示三行
|
||||
|
||||
@ -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 方法来监听
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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' : ''}}">
|
||||
<template is="zan-tab-list" data="{{ tab, componentId }}"></template>
|
||||
<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>
|
||||
@ -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' : ''}}"
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user