Browse Source

no message

featrue/v4.5
xpz2018 4 years ago
parent
commit
306491193d
15 changed files with 384 additions and 3 deletions
  1. 1
      app.json
  2. 71
      components/tab/index.js
  3. 3
      components/tab/index.json
  4. 7
      components/tab/index.wxml
  5. 101
      components/tab/index.wxss
  6. 132
      components/tabs/index.js
  7. 3
      components/tabs/index.json
  8. 6
      components/tabs/index.wxml
  9. 28
      components/tabs/index.wxss
  10. 2
      pages/mall/fragment/index.js
  11. 17
      pages/mall/search-list/index.js
  12. 5
      pages/mall/search-list/index.json
  13. 6
      pages/mall/search-list/index.wxml
  14. 1
      pages/mall/search-list/index.wxss
  15. 4
      pages/moment/theall/index.js

1
app.json

@ -33,6 +33,7 @@
"pages/bidding/detail/index",
"pages/mall/price-index/index",
"pages/mall/detail/index",
"pages/mall/search-list/index",
"pages/morder/index/index",
"pages/morder/create/index",
"pages/morder/detail/index",

71
components/tab/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)
},
},
})

3
components/tab/index.json

@ -0,0 +1,3 @@
{
"component": true
}

7
components/tab/index.wxml

@ -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>

101
components/tab/index.wxss

@ -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
}

132
components/tabs/index.js

@ -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)
},
})

3
components/tabs/index.json

@ -0,0 +1,3 @@
{
"component": true
}

6
components/tabs/index.wxml

@ -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>

28
components/tabs/index.wxss

@ -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
}

2
pages/mall/fragment/index.js

@ -82,7 +82,7 @@ Component({
wx.navigateTo({url: `/pages/home/city-select/index?type=1` })
},
searchList: function(){
wx.navigateTo({url: `/pages/mall/search-list/index` })
},
postList: function(){

17
pages/mall/search-list/index.js

@ -0,0 +1,17 @@
// pages/home/about/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
})

5
pages/mall/search-list/index.json

@ -0,0 +1,5 @@
{
"usingComponents": {
"wux-cell": "/components/cell/index"
}
}

6
pages/mall/search-list/index.wxml

@ -0,0 +1,6 @@
<!--pages/home/about/index.wxml-->
<cu-custom bgColor="bg-white" isBack="{{true}}">
<view slot="content">搜索</view>
</cu-custom>

1
pages/mall/search-list/index.wxss

@ -0,0 +1 @@
/* pages/home/about/index.wxss */

4
pages/moment/theall/index.js

@ -27,13 +27,13 @@ Component({
if (this.data.tabIndex == Number(detail.index)) {
return
}
this.setData({ pIndex: 0 })
},
onProviceChange: function(){
if (this.data.pIndex == Number(detail.index)) {
return
}
},
fetchList: function(){

Loading…
Cancel
Save