Skip to content

Commit 5e161c9

Browse files
mehaotianmehaotian
committed
修改 tabbar 顶部可拖动选项卡 示例
1. 顶部 tabbar 修改为可配置 是否可以拖动
1 parent 7b1673a commit 5e161c9

5 files changed

Lines changed: 192 additions & 132 deletions

File tree

‎components/tab-nvue/mediaList.nvue‎

100644100755
File mode changed.

‎components/tab-nvue/tabBar.nvue‎

100644100755
Lines changed: 128 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,130 @@
1+
<template>
2+
<div>
3+
<div v-if="drag" class="wrap tab-bar-scroll">
4+
<scroller class="scroll" scrollDirection="horizontal" showScrollbar="false">
5+
<div
6+
class="tab-bar-item tab-bar-scroll-width"
7+
v-for="(tabBar, t) in tabBars"
8+
:key="t"
9+
:ref="tabBar.id + t"
10+
@click="change(t)"
11+
>
12+
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{
13+
tabBar.name
14+
}}</text>
15+
</div>
16+
</scroller>
17+
</div>
18+
<div v-else class="wrap tab-bar">
19+
<div
20+
class="tab-bar-item"
21+
v-for="(tabBar, t) in tabBars"
22+
:key="t"
23+
:ref="tabBar.id + t"
24+
@click="change(t)"
25+
>
26+
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{
27+
tabBar.name
28+
}}</text>
29+
</div>
30+
</div>
31+
</div>
32+
</template>
33+
134
<script>
2-
export default {
3-
render(createElement) {
4-
const vnodes = this.$slots.default;
5-
if (vnodes && vnodes.length) {
6-
for (let i = 0; i < vnodes.length; i++) {
7-
let vnode = vnodes[i];
8-
if (!vnode.data) {
9-
vnode.data = Object.create(null)
10-
}
11-
if (!vnode.data.on) {
12-
vnode.data.on = Object.create(null)
13-
}
14-
vnode.data.on.click = this._change;
15-
}
16-
}
17-
return createElement('div', {//如果需要左右滑动用scroller，不需要的话用div就行,添加个属性需要时将scroller添加 children
18-
style: {
19-
height:'100px',
20-
width:'750px',
21-
flexDirection:'row',
22-
borderBottomWidth: "1px",
23-
borderColor: "#c8c7cc",
24-
borderBottomStyle: "solid"
25-
}
26-
}, [
27-
createElement('scroller', {
28-
attrs: {
29-
scrollDirection:'horizontal',
30-
showScrollbar:'false'
31-
},
32-
style: {
33-
height:'100px',
34-
width:'750px',
35-
flexDirection:'row'
36-
}
37-
}, this.$slots.default)
38-
])
39-
},
40-
methods:{
41-
_change(e){
42-
let ret = {
43-
index:e.index
44-
}
45-
if(e.type === 'click'){
46-
let target = e.target;
47-
ret.index = target.parentNode.children.findIndex(node=>node===target)
48-
}
49-
this.$emit('_tabBarClick', ret)
50-
}
51-
}
52-
}
35+
const dom = weex.requireModule('dom');
36+
37+
export default {
38+
props: {
39+
drag: {
40+
type: Boolean,
41+
default: true
42+
},
43+
tabBars: {
44+
type: Array,
45+
default: function(e) {
46+
return [];
47+
}
48+
},
49+
tabIndex: {
50+
type: Number,
51+
default: 0
52+
}
53+
},
54+
watch:{
55+
tabIndex(newVal){
56+
this.change(newVal)
57+
}
58+
},
59+
methods: {
60+
async change(index, e) {
61+
let ret = {
62+
index: index
63+
};
64+
// if (e.type === 'click') {
65+
// let target = e.target;
66+
// ret.index = target.parentNode.children.findIndex(node => node === target);
67+
// }
68+
this.$emit('_tabBarClick', ret);
69+
const el = this.$refs[this.tabBars[index].id + index][0]
70+
let elSize = await this.getElSize(el);
71+
if (elSize.left + elSize.width > 750) {
72+
let idx = index - 4;
73+
let newEl = this.$refs[this.tabBars[idx].id + idx][0]
74+
dom.scrollToElement(newEl, {});
75+
return;
76+
}
77+
if (elSize.left < 0) {
78+
dom.scrollToElement(el, {});
79+
}
80+
81+
},
82+
getElSize(el) { //得到元素的size
83+
return new Promise((res, rej) => {
84+
const result = dom.getComponentRect(el, option => {
85+
res(option.size);
86+
})
87+
})
88+
}
89+
}
90+
};
5391
</script>
92+
<style>
93+
.wrap {
94+
height: 100px;
95+
width: 750px;
96+
flex-direction: row;
97+
border-width: 1px;
98+
border-color: #c8c7cc;
99+
border-style: solid;
100+
font-size: 28px;
101+
}
102+
.tab-bar {
103+
justify-content: space-between;
104+
padding-left: 30px;
105+
padding-right: 30px;
106+
}
107+
.scroll {
108+
height: 100px;
109+
width: 750px;
110+
flex-direction: row;
111+
}
112+
.tab-bar-item {
113+
height: 100px;
114+
flex-direction: column;
115+
align-items: center;
116+
justify-content: center;
117+
}
118+
.tab-bar-scroll-width {
119+
width: 150px;
120+
}
121+
.tab-bar-title {
122+
height: 100px;
123+
line-height: 100px;
124+
font-size: 30px;
125+
color: #555;
126+
}
127+
.active {
128+
color: #007aff;
129+
}
130+
</style>

‎components/tab-nvue/tabContent.nvue‎

100644100755
File mode changed.

‎components/tab-nvue/tabs.nvue‎

100644100755
Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import tabContent from './tabContent.nvue'
2+
import uniTabContent from './tabContent.nvue'
33
export default {
44
props: {
55
index: {
@@ -13,7 +13,7 @@
1313
}
1414
},
1515
components: {
16-
tabContent,
16+
uniTabContent,
1717
},
1818
render(createElement) {
1919
const vnodes = this.$slots.default;
@@ -24,9 +24,9 @@
2424
if (!vnode || !vnode.componentOptions) {
2525
continue
2626
}
27-
if (vnode.componentOptions.tag === 'tab-content') {
27+
if (vnode.componentOptions.tag === 'uni-tab-content') {
2828

29-
const newVNode = createElement('tab-content', {
29+
const newVNode = createElement('uni-tab-content', {
3030
staticClass: vnode.data.staticClass,
3131
'class': vnode.data['class'],
3232
style: vnode.data.style
@@ -45,15 +45,15 @@
4545
newVNode.data.on = Object.create(null)
4646
}
4747
newVNode.data.attrs.index = this.index
48-
newVNode.data.on.change = this._change
48+
newVNode.data.on.change = this._change
4949
newVNodes.push(newVNode)
5050
}
51-
if (vnode.componentOptions.tag === 'tab-bar') {
51+
if (vnode.componentOptions.tag === 'uni-tab-bar') {
5252
if (!vnode.componentOptions.listeners) { //监听子元素传递过来的事件
5353
vnode.componentOptions.listeners = Object.create(null)
5454
}
55-
vnode.componentOptions.listeners._tabBarClick = this._tabBarClick;
56-
newVNodes.push(vnode)
55+
vnode.componentOptions.listeners._tabBarClick = this._tabBarClick;
56+
newVNodes.push(vnode)
5757
}
5858
}
5959
}
@@ -71,16 +71,16 @@
7171
methods: {
7272
_tabBarClick(e) {
7373
this.tabIndex = e.index;
74-
this.$emit('change', e);
74+
this.$emit('change', e);
7575
},
76-
_change(e) {
76+
_change(e) {
7777
if (this.tabIndex === e.index) {
7878
return;
7979
}
8080
this.tabIndex = e.index;
8181
this.$emit('change', {
8282
index: e.index
83-
})
83+
})
8484
}
8585
}
8686
}

0 commit comments

Comments
 (0)