Browse Source

no message

featrue/v4.5
xpz2018 4 years ago
parent
commit
8dc78e937f
13 changed files with 44 additions and 367 deletions
  1. 75
      components/tab/index.js
  2. 3
      components/tab/index.json
  3. 7
      components/tab/index.wxml
  4. 101
      components/tab/index.wxss
  5. 132
      components/tabs/index.js
  6. 3
      components/tabs/index.json
  7. 6
      components/tabs/index.wxml
  8. 28
      components/tabs/index.wxss
  9. 4
      pages/moment/fragment/index.wxml
  10. 1
      pages/moment/recommend/index.js
  11. 1
      pages/moment/recommend/index.wxml
  12. 40
      pages/moment/theall/index.js
  13. 10
      pages/moment/theall/index.wxml

75
components/tab/index.js

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

3
components/tab/index.json

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

7
components/tab/index.wxml

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

101
components/tab/index.wxss

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

132
components/tabs/index.js

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

3
components/tabs/index.json

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

6
components/tabs/index.wxml

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

28
components/tabs/index.wxss

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

4
pages/moment/fragment/index.wxml

@ -27,10 +27,10 @@
</swiper>
</view>
<view class="bg-white" style="height:90rpx;border-bottom:2rpx solid #f3f3f3;border-top:2rpx solid #f3f3f3" wx:if="{{firstShow}}">
<wux-tabi tab-data="{{tabList}}" tab-index="{{tabIndex}}" scroll="{{false}}" bind:change="onTabChange"></wux-tabi>
<wux-tabi tab-data="{{tabList}}" tab-index="{{tabIndex}}" line-height="{{4}}" scroll="{{false}}" bind:change="onTabChange"></wux-tabi>
</view>
<swiper current="{{tabIndex}}" duration="300" style="height:{{height}}rpx">
<swiper current="{{tabIndex}}" duration="0" style="height:{{height}}rpx">
<swiper-item catchtouchmove="stopTouchMove">
<recommend id="recommend" height="{{height}}"/>
</swiper-item>

1
pages/moment/recommend/index.js

@ -16,7 +16,6 @@ Component({
},
methods: {
onRestart: function () {
console.log('recomm....start')
if(!this.firstShow){
}

1
pages/moment/recommend/index.wxml

@ -13,7 +13,6 @@
<view style="width: 25%;padding-left: 24rpx">起扣点</view>
</view>
<view wx:for-item="pageItem" wx:for-index="pageIndex" wx:for="{{orderList}}" wx:key="pageIndex">
<view wx:for="{{pageItem}}" wx:key="index">
<view class="bg-white" style="padding: 0rpx 32rpx" wx:if="{{pageIndex != 0 || index != 0 }}">
<wux-divider show-text="{{ false }}"></wux-divider>

40
pages/moment/theall/index.js

@ -8,19 +8,47 @@ Component({
multipleSlots: true
},
properties: {
height: { type: Number, value: 0 },
item: { type: Object, value: null }
height: { type: Number, value: 0 }
},
data: {
tabList: [ '全部', '华中', '华南', '华东', '北部', '西部'],
tabIndex: 0,
navData:[
{
text: '首页'
},
{
text: '健康'
},
{
text: '情感'
},
{
text: '职场'
},
{
text: '育儿'
},
{
text: '纠纷'
},
{
text: '青葱'
},
{
text: '上课'
},
{
text: '下课'
}
],
orderList: []
},
methods: {
onRestart: function () {
console.log('attention....start')
if(!this.firstShow){
if(!this.data.firstShow){
setTimeout(() => { this.setData({ tabIndex: 0, firstShow: true }) }, 100)
}
this.firstShow = true
},
fetchList: function(){

10
pages/moment/theall/index.wxml

@ -1,6 +1,12 @@
<!--pages/message/index.wxml-->
<scroll-view scroll-y style="height: {{height}}rpx;" bind:scrolltolower="fetchList">
<view class="bg-white" style="height:90rpx;border-bottom:2rpx solid #f3f3f3" wx:if="{{firstShow}}">
<wux-tabi tab-data="{{tabList}}" tab-index="{{tabIndex}}" line-height="{{3}}" scroll="{{false}}" bind:change="onTabChange"></wux-tabi>
</view>
<view class="bg-white" style="height:90rpx;border-bottom:2rpx solid #f3f3f3" wx:if="{{firstShow}}">
<wux-tabi tab-data="{{tabList}}" tab-index="{{tabIndex}}" typing="{{2}}" scroll="{{true}}" bind:change="onTabChange"></wux-tabi>
</view>
<scroll-view scroll-y style="height: {{height - 190}}rpx;" bind:scrolltolower="fetchList">
<wux-skeleton active wx:if="{{!orderList.length}}">
<view class="flex item-content">
<wux-skeleton-paragraph rounded rows="8" wux-class="case3-class" />

Loading…
Cancel
Save