15 changed files with 384 additions and 3 deletions
Split View
Diff Options
-
1app.json
-
71components/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
-
2pages/mall/fragment/index.js
-
17pages/mall/search-list/index.js
-
5pages/mall/search-list/index.json
-
6pages/mall/search-list/index.wxml
-
1pages/mall/search-list/index.wxss
-
4pages/moment/theall/index.js
@ -0,0 +1,71 @@ |
|||
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, |
|||
}, |
|||
}, |
|||
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) |
|||
}, |
|||
}, |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<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 }}"></view> |
|||
</view> |
|||
@ -0,0 +1,101 @@ |
|||
.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: #387ef5 |
|||
} |
|||
.wux-tabs__tab--positive.wux-tabs__tab--current { |
|||
color: #387ef5 |
|||
} |
|||
.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 |
|||
} |
|||
@ -0,0 +1,132 @@ |
|||
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) |
|||
}, |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
<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> |
|||
@ -0,0 +1,28 @@ |
|||
.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 |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
// pages/home/about/index.js
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"wux-cell": "/components/cell/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
<!--pages/home/about/index.wxml--> |
|||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
|||
<view slot="content">搜索</view> |
|||
</cu-custom> |
|||
|
|||
|
|||
@ -0,0 +1 @@ |
|||
/* pages/home/about/index.wxss */ |
|||
Write
Preview
Loading…
Cancel
Save