13 changed files with 44 additions and 367 deletions
Split View
Diff Options
-
75components/tab/index.js
-
3components/tab/index.json
-
7components/tab/index.wxml
-
101components/tab/index.wxss
-
132components/tabs/index.js
-
3components/tabs/index.json
-
6components/tabs/index.wxml
-
28components/tabs/index.wxss
-
4pages/moment/fragment/index.wxml
-
1pages/moment/recommend/index.js
-
1pages/moment/recommend/index.wxml
-
40pages/moment/theall/index.js
-
10pages/moment/theall/index.wxml
@ -1,75 +0,0 @@ |
|||
import baseComponent from '../helpers/baseComponent' |
|||
import classNames from '../helpers/classNames' |
|||
|
|||
baseComponent({ |
|||
relations: { |
|||
'../tabs/index': { |
|||
type: 'parent', |
|||
}, |
|||
}, |
|||
properties: { |
|||
prefixCls: { |
|||
type: String, |
|||
value: 'wux-tabs__tab', |
|||
}, |
|||
key: { |
|||
type: String, |
|||
value: '', |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '', |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
value: false, |
|||
}, |
|||
underline: { |
|||
type: Boolean, |
|||
value: true, |
|||
}, |
|||
}, |
|||
data: { |
|||
current: false, |
|||
scroll: false, |
|||
}, |
|||
computed: { |
|||
classes: ['prefixCls, direction, scroll, theme, current, disabled', function(prefixCls, direction, scroll, theme, current, disabled) { |
|||
const wrap = classNames(prefixCls, { |
|||
[`${prefixCls}--${direction}`]: direction, |
|||
[`${prefixCls}--${theme}`]: theme, |
|||
[`${prefixCls}--scroll`]: scroll, |
|||
[`${prefixCls}--current`]: current, |
|||
[`${prefixCls}--disabled`]: disabled, |
|||
}) |
|||
const title = `${prefixCls}-title` |
|||
const bar = `${prefixCls}-bar` |
|||
|
|||
return { |
|||
wrap, |
|||
title, |
|||
bar, |
|||
} |
|||
}], |
|||
}, |
|||
methods: { |
|||
changeCurrent({ current, scroll, theme, direction }) { |
|||
this.setData({ |
|||
current, |
|||
scroll, |
|||
theme, |
|||
direction, |
|||
}) |
|||
}, |
|||
onTap() { |
|||
const { key, disabled } = this.data |
|||
const parent = this.getRelationNodes('../tabs/index')[0] |
|||
|
|||
if (disabled || !parent) return |
|||
|
|||
this.triggerEvent('click', { key }) |
|||
|
|||
parent.setActiveKey(key) |
|||
}, |
|||
}, |
|||
}) |
|||
@ -1,3 +0,0 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -1,7 +0,0 @@ |
|||
<view class="wux-class {{ classes.wrap }}" bindtap="onTap"> |
|||
<view class="{{ classes.title }}" wx:if="{{ title }}">{{ title }}</view> |
|||
<block wx:else> |
|||
<slot></slot> |
|||
</block> |
|||
<view class="{{ classes.bar }}" wx:if="{{ current && underline}}"></view> |
|||
</view> |
|||
@ -1,101 +0,0 @@ |
|||
.wux-tabs__tab { |
|||
-ms-flex: 1; |
|||
flex: 1; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
width: 100%; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
font-size: 28rpx; |
|||
color: #80848f |
|||
} |
|||
.wux-tabs__tab-bar { |
|||
display: block; |
|||
width: 100%; |
|||
height: 4rpx; |
|||
background: 0 0; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #33cd5f |
|||
} |
|||
.wux-tabs__tab--vertical { |
|||
padding: 0 30rpx |
|||
} |
|||
.wux-tabs__tab--vertical .wux-tabs__tab-bar { |
|||
width: 4rpx; |
|||
height: 100%; |
|||
right: 0; |
|||
left: auto |
|||
} |
|||
.wux-tabs__tab--current { |
|||
color: #33cd5f |
|||
} |
|||
.wux-tabs__tab--horizontal.wux-tabs__tab--scroll { |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
padding: 0 30rpx; |
|||
width: auto |
|||
} |
|||
.wux-tabs__tab--disabled { |
|||
opacity: .3 |
|||
} |
|||
.wux-tabs__tab--light .wux-tabs__tab-bar { |
|||
background: #ddd |
|||
} |
|||
.wux-tabs__tab--light.wux-tabs__tab--current { |
|||
color: #ddd |
|||
} |
|||
.wux-tabs__tab--stable .wux-tabs__tab-bar { |
|||
background: #b2b2b2 |
|||
} |
|||
.wux-tabs__tab--stable.wux-tabs__tab--current { |
|||
color: #b2b2b2 |
|||
} |
|||
.wux-tabs__tab--positive .wux-tabs__tab-bar { |
|||
background: #008AFF |
|||
} |
|||
.wux-tabs__tab--positive.wux-tabs__tab--current { |
|||
color: #008AFF |
|||
} |
|||
.wux-tabs__tab--calm .wux-tabs__tab-bar { |
|||
background: #11c1f3 |
|||
} |
|||
.wux-tabs__tab--calm.wux-tabs__tab--current { |
|||
color: #11c1f3 |
|||
} |
|||
.wux-tabs__tab--assertive .wux-tabs__tab-bar { |
|||
background: #ef473a |
|||
} |
|||
.wux-tabs__tab--assertive.wux-tabs__tab--current { |
|||
color: #ef473a |
|||
} |
|||
.wux-tabs__tab--balanced .wux-tabs__tab-bar { |
|||
background: #33cd5f |
|||
} |
|||
.wux-tabs__tab--balanced.wux-tabs__tab--current { |
|||
color: #33cd5f |
|||
} |
|||
.wux-tabs__tab--energized .wux-tabs__tab-bar { |
|||
background: #ffc900 |
|||
} |
|||
.wux-tabs__tab--energized.wux-tabs__tab--current { |
|||
color: #ffc900 |
|||
} |
|||
.wux-tabs__tab--royal .wux-tabs__tab-bar { |
|||
background: #886aea |
|||
} |
|||
.wux-tabs__tab--royal.wux-tabs__tab--current { |
|||
color: #886aea |
|||
} |
|||
.wux-tabs__tab--dark .wux-tabs__tab-bar { |
|||
background: #444 |
|||
} |
|||
.wux-tabs__tab--dark.wux-tabs__tab--current { |
|||
color: #444 |
|||
} |
|||
@ -1,132 +0,0 @@ |
|||
import baseComponent from '../helpers/baseComponent' |
|||
import classNames from '../helpers/classNames' |
|||
|
|||
const getDefaultActiveKey = (elements) => { |
|||
const target = elements.filter((element) => !element.data.disabled)[0] |
|||
if (target) { |
|||
return target.data.key |
|||
} |
|||
return null |
|||
} |
|||
|
|||
const activeKeyIsValid = (elements, key) => { |
|||
return elements.map((element) => element.data.key).includes(key) |
|||
} |
|||
|
|||
const getActiveKey = (elements, activeKey) => { |
|||
const defaultActiveKey = getDefaultActiveKey(elements) |
|||
return !activeKey ? defaultActiveKey : !activeKeyIsValid(elements, activeKey) ? defaultActiveKey : activeKey |
|||
} |
|||
|
|||
baseComponent({ |
|||
relations: { |
|||
'../tab/index': { |
|||
type: 'child', |
|||
observer() { |
|||
this.debounce(this.updated) |
|||
}, |
|||
}, |
|||
}, |
|||
properties: { |
|||
prefixCls: { |
|||
type: String, |
|||
value: 'wux-tabs', |
|||
}, |
|||
defaultCurrent: { |
|||
type: String, |
|||
value: '', |
|||
}, |
|||
current: { |
|||
type: String, |
|||
value: '', |
|||
observer(newVal) { |
|||
if (this.data.controlled) { |
|||
this.updated(newVal) |
|||
} |
|||
}, |
|||
}, |
|||
scroll: { |
|||
type: Boolean, |
|||
value: false, |
|||
}, |
|||
controlled: { |
|||
type: Boolean, |
|||
value: false, |
|||
}, |
|||
theme: { |
|||
type: String, |
|||
value: 'balanced', |
|||
}, |
|||
direction: { |
|||
type: String, |
|||
value: 'horizontal', |
|||
}, |
|||
}, |
|||
data: { |
|||
activeKey: '', |
|||
keys: [], |
|||
}, |
|||
computed: { |
|||
classes: ['prefixCls, direction, scroll', function(prefixCls, direction, scroll) { |
|||
const wrap = classNames(prefixCls, { |
|||
[`${prefixCls}--${direction}`]: direction, |
|||
[`${prefixCls}--scroll`]: scroll, |
|||
}) |
|||
|
|||
return { |
|||
wrap, |
|||
} |
|||
}], |
|||
}, |
|||
methods: { |
|||
updated(value = this.data.activeKey) { |
|||
const elements = this.getRelationNodes('../tab/index') |
|||
const activeKey = getActiveKey(elements, value) |
|||
|
|||
if (this.data.activeKey !== activeKey) { |
|||
this.setData({ activeKey }) |
|||
} |
|||
|
|||
this.changeCurrent(activeKey, elements) |
|||
}, |
|||
changeCurrent(activeKey, elements) { |
|||
const { scroll, theme, direction } = this.data |
|||
|
|||
if (elements.length > 0) { |
|||
elements.forEach((element) => { |
|||
element.changeCurrent({ |
|||
current: element.data.key === activeKey, |
|||
scroll, |
|||
theme, |
|||
direction, |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
if (this.data.keys.length !== elements.length) { |
|||
this.setData({ |
|||
keys: elements.map((element) => element.data) |
|||
}) |
|||
} |
|||
}, |
|||
emitEvent(key) { |
|||
this.triggerEvent('change', { |
|||
key, |
|||
keys: this.data.keys, |
|||
}) |
|||
}, |
|||
setActiveKey(activeKey) { |
|||
if (!this.data.controlled) { |
|||
this.updated(activeKey) |
|||
} |
|||
|
|||
this.emitEvent(activeKey) |
|||
}, |
|||
}, |
|||
ready() { |
|||
const { defaultCurrent, current, controlled } = this.data |
|||
const activeKey = controlled ? current : defaultCurrent |
|||
|
|||
this.updated(activeKey) |
|||
}, |
|||
}) |
|||
@ -1,3 +0,0 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
<scroll-view wx:if="{{ scroll }}" scroll-x="{{ direction === 'horizontal' }}" scroll-y="{{ direction === 'vertical' }}" class="wux-class {{ classes.wrap }}"> |
|||
<slot></slot> |
|||
</scroll-view> |
|||
<view wx:else class="wux-class {{ classes.wrap }}"> |
|||
<slot></slot> |
|||
</view> |
|||
@ -1,28 +0,0 @@ |
|||
.wux-tabs { |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
width: 100%; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
-ms-flex-pack: distribute; |
|||
justify-content: space-around; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
background: #fff |
|||
} |
|||
.wux-tabs--scroll { |
|||
display: block; |
|||
overflow: auto; |
|||
white-space: nowrap |
|||
} |
|||
.wux-tabs--vertical { |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
width: auto; |
|||
height: auto; |
|||
max-height: 540rpx; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save