<template>
<div>
<div v-if="drag" class="wrap tab-bar-scroll">
<scroller class="scroll" scrollDirection="horizontal" showScrollbar="false">
<div
class="tab-bar-item tab-bar-scroll-width"
v-for="(tabBar, t) in tabBars"
:key="t"
:ref="tabBar.id + t"
@click="change(t)"
>
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{
tabBar.name
}}</text>
</div>
</scroller>
</div>
<div v-else class="wrap tab-bar">
<div
class="tab-bar-item"
v-for="(tabBar, t) in tabBars"
:key="t"
:ref="tabBar.id + t"
@click="change(t)"
>
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{
tabBar.name
}}</text>
</div>
</div>
</div>
</template>
<script>
const dom = weex.requireModule('dom');
export default {
props: {
drag: {
type: Boolean,
default: true
},
tabBars: {
type: Array,
default: function(e) {
return [];
}
},
tabIndex: {
type: Number,
default: 0
}
},
watch:{
tabIndex(newVal){
this.change(newVal)
}
},
methods: {
async change(index, e) {
let ret = {
index: index
};
// if (e.type === 'click') {
// let target = e.target;
// ret.index = target.parentNode.children.findIndex(node => node === target);
// }
this.$emit('_tabBarClick', ret);
const el = this.$refs[this.tabBars[index].id + index][0]
let elSize = await this.getElSize(el);
if (elSize.left + elSize.width > 750) {
let idx = index - 4;
let newEl = this.$refs[this.tabBars[idx].id + idx][0]
dom.scrollToElement(newEl, {});
return;
}
if (elSize.left < 0) {
dom.scrollToElement(el, {});
}
},
getElSize(el) { //得到元素的size
return new Promise((res, rej) => {
const result = dom.getComponentRect(el, option => {
res(option.size);
})
})
}
}
};
</script>
<style>
.wrap {
height: 40wx;
/* width:750wx; */
flex-direction: row;
border-width: 1wx;
border-color: #c8c7cc;
border-style: solid;
font-size: 15wx;
}
.tab-bar {
justify-content: space-between;
padding-left: 20wx;
padding-right: 20wx;
}
.scroll {
height: 40wx;
/* width:750wx; */
flex-direction: row;
}
.tab-bar-item {
height: 40wx;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar-scroll-width {
margin-left: 10wx;
margin-right: 10wx;
}
.tab-bar-title {
font-size:15wx;
color: #555;
}
.active {
font-size:15wx;
color:#FFFFFF;
text-align: center;
/* 圆角*/
background-color: #6D5732;
border-radius: 30wx;
padding-left: 15wx;
padding-right: 15wx;
padding-top: 6wx;
padding-bottom: 6wx;
}
</style>
这个是官方组件tabbar里的实例代码,根本不起作用!
```你要是说,确实现在解决不了也行啊,可是为啥没个回复?
5 个回复
最佳回复
DCloud_App_Array
使用weex的0.20.0版本,Weex中css单位官方公布仅支持px。
参考:https://weex.apache.org/cn/wiki/css-units.html。
而实际weex的实现中也支持wx单位(与设备屏幕宽度无关的绝对长度单位)
t***@163.com (作者) - 80后
官方为啥不回答下这个问题?回避?还是解决不了?
怂了?
t***@163.com (作者) - 80后
你要是说,确实现在解决不了也行啊,可是为啥没个回复?
t***@163.com (作者) - 80后
t***@163.com (作者) - 80后
请官方出来回应一下