13 changed files with 44 additions and 367 deletions
Unified 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