<template>
<view class="tm-tabs " :class="[bgColor == 'white' ? (black_tmeme ? 'bk grey-darken-4' : bgColor) : bgColor, 'shadow-' + bgColor + '-' + shadow, black_tmeme ? 'bk' : '']">
<scroll-view scroll-with-animation :scroll-into-view="toTargetId" @scroll="scrollViesw" scroll-x class="tm-tabs-con ">
<view
class="tm-tabs-wk "
:class="{
'text-align-left': align == 'left',
'text-align-right': align == 'right',
'text-align-center': align == 'center',
'flex-between': align == 'split'
}"
>
<view
@click.stop.prevent="acitveItemClick(index, true, $event)"
class="tm-tabs-con-item d-inline-block "
:class="[
`tm-tabs-con-item-${index}`,
model == 'rect' ? 'border-' + color_tmeme + '-a-1' : '',
index !== list.length - 1 && model == 'rect' ? 'tm-tabs-con-item-rborder' : '',
active == index && model == 'rect' ? color_tmeme : ''
]"
:style="{
height: barheight + 'px',
lineHeight: barheight + 'px'
}"
v-for="(item, index) in list"
:key="index"
:id="guid + '_' + index"
>
<view
class="tm-tabs-con-item-text px-24"
:style="{
fontSize: active == index ? active_font_size : font_size
}"
:class="[
(model == 'line' || model == 'none') && active == index ? 'text-' + color_tmeme : 'text-'+fontColor,
(model == 'line' || model == 'none') && active == index ? 'text-weight-b' : '',
model == 'fill' && active == index ? color_tmeme: '',
]"
>
<slot name="default" :data="item">{{ item[rangeKey] || item }}</slot>
</view>
</view>
</view>
<view
v-if="model == 'line'"
class="tm-tabs-con-item-border"
:class="[borderColor, `shadow-${color_tmeme}-4`, isOnecLoad == false ? 'tm-tabs-con-item-border-trans' : '']"
:style="{
transform: `translateX(${activePos.left})`,
width: activePos.width
}"
></view>
</scroll-view>
</view>
</template>
<script>
/**
* 选项卡切换
* @property {String} model = [line|rect|fill] 默认：line，样式,线和框两种
* @property {String} color = [] 默认：primary，主题文字颜色。
* @property {String} active-border-color = [] 默认：''，底下指示线的颜色主题。
* @property {String} bg-color = [] 默认：white，主题背景颜色。
* @property {Number} value = [] 默认：0，当前激活的项。双向绑定使用value.sync或者v-model
* @property {Number} font-size = [] 默认：28，默认字体大小，单位upx
* @property {Number} font-color = [] 默认：''，默认文字颜色,默认为空，使用主题自动匹配文字色。
* @property {Number} active-font-size = [] 默认：28，激活后字体大小，单位upx
* @property {String} align = [center|left|right|split] 默认：center，居中，左，右，均分对齐
* @property {String|Number} height = [90|100] 默认：90，高度。单位 upx
* @property {Array} list = [] 默认：[]，数据数组，可以是字符串数组，也可以是对象数组，需要提供rangKey
* @property {String} range-key = [] 默认：''，数据数组，需要提供rangKey以显示文本。
* @property {Function} change 返回当前选中的index值同v-model一样的值
* @property {String} active-key-value = [] 默认：''，当前激活项(和value一样的功能)，如果提供对象数组，则可以提供当前选项list[index][activeKey]的对象数据来自动解析当前选择的index项
*/
export default {
name: 'tm-tabs',
model: {
prop: 'value',
event: 'input'
},
props: {
// 样式,
model: {
type: String,
default: 'line' //line|rect|fill
},
// 主题色包括文字颜色
color: {
type: String,
default: 'primary'
},
activeBorderColor: {
type: String,
default: ''
},
// 背景颜色。
bgColor: {
type: String,
default: 'white'
},
// 当前激活的项。
value: {
type: Number,
default: 0
},
// 项目对齐方式。
align: {
type: String,
default: 'center' // center|left|right|split
},
// 单位为upx
height: {
type: String | Number,
default: 90
},
black: {
type: Boolean | String,
default: null
},
// 投影。
shadow: {
type: String | Number,
default: 3
},
list: {
type: Array,
default: () => {
// { title: '标签1', value: '' }, { title: '标签2标签标签', value: '' }, { title: '标签3', value: '' }
return [];
}
},
rangeKey: {
type: String,
default: ''
},
// 当前激活项，如果提供对象数组，则可以提供当前选项的对象数据来自动解析当前选择的index项
activeKeyValue: {
type: String,
default: ''
},
fontSize: {
type: Number,
default: 28
},
//默认文字颜色,默认为空，使用主题自动匹配文字色。
fontColor: {
type: String,
default: ''
},
activeFontSize: {
type: Number,
default: 28
},
// 跟随主题色的改变而改变。
fllowTheme: {
type: Boolean | String,
default: true
}
},
watch: {
activeKeyValue: function() {
this.setActiveIndex();
},
value: async function(val) {
this.active = val;
this.acitveItemClick(val,false);
},
active: async function(val) {
this.$emit('input', val);
this.$emit('update:value', val);
this.$emit('change', val);
},
list: {
deep: true,
async handler() {
await this.inits();
}
}
},
computed: {
font_size: function() {
return uni.upx2px(this.fontSize) + 'px';
},
active_font_size: function() {
return uni.upx2px(this.activeFontSize) + 'px';
},
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme: function() {
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
return this.$tm.vx.state().tmVuetify.color;
}
return this.color;
},
borderColor: function() {
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
return this.$tm.vx.state().tmVuetify.color;
}
return this.activeBorderColor || this.color;
},
barheight: function() {
let h = parseInt(this.height);
if (isNaN(h) || !h) h = 90;
return uni.upx2px(h);
}
},
data() {
return {
active: 0,
old_active: 0,
guid: '',
scrollObj: null,
activePos: {
left: 0,
width: 0
},
preantObjinfo: null,
tid: 88855565656,
isOnecLoad: true,
toTargetId: ''
};
},
created() {
this.guid = uni.$tm.guid();
this.active = this.value;
},
mounted() {
let t= this;
uni.$tm.sleep(50).then(()=>{
t.inits();
})
},
methods: {
inits() {
let t = this;
this.setActiveIndex(this.active);
let pqu = uni.createSelectorQuery().in(t)
pqu.select('.tm-tabs')
.boundingClientRect().exec(function (pd) {
t.preantObjinfo = pd[0];
t.$nextTick(function() {
t.acitveItemClick(t.active, false);
});
})
},
scrollViesw(e) {
this.scrollObj = e;
},
setLabelLeft(indexObj_now, callback) {
let t = this;
let e = this.scrollObj;
let escroolet = 0;
if (e) {
escroolet = e.detail.scrollLeft;
}
let pqu = uni.createSelectorQuery().in(t)
let ychi = this.activeFontSize==this.fontSize?0:160;
uni.$tm.sleep(ychi).then(fs=>{
pqu.select(`.tm-tabs-con-item-${indexObj_now}`)
.boundingClientRect().select(`.tm-tabs-con-item-0`).boundingClientRect().exec(
function(res) {
let now_Item_obj = res[0];
let now_Item_one = res[1];
if(now_Item_obj.id==now_Item_one.id){
// now_Item_obj.right = Math.abs(now_Item_one.left)+now_Item_one.right;
// now_Item_one.right = Math.abs(now_Item_one.left)+now_Item_one.right;
// now_Item_obj.left=0;
// now_Item_one.left=0;
}
let nowId = t.guid + '_' + t.active;
let dleft = now_Item_obj.left;
let preventLeft = t.preantObjinfo.left;
let acLeft = 0;
let lftc = 0;
let ch = (now_Item_obj.width - 24 - uni.upx2px(24) * 2) / 2;
if (dleft <= 0) {
dleft = escroolet + now_Item_obj.left;
if (now_Item_obj.left == 0 && escroolet == 0) {
lftc = (now_Item_obj.width - 24 - uni.upx2px(24) * 2) / 2 + 12 + 'px';
} else {
lftc = dleft + ch + 12 + 'px';
if(now_Item_obj.id==now_Item_one.id){
let ptch = (now_Item_obj.width) / 2;
lftc = ptch-12+'px'
}
}
} else {
acLeft = Math.abs(now_Item_one.left >= 0 ? 0 : now_Item_one.left) + Math.abs(dleft);
lftc = acLeft + uni.upx2px(24) - (now_Item_one.left >= 0 ? t.preantObjinfo.left : 0) + ch + 'px';
}
t.activePos = {
left: lftc,
// left:nowPage_x + itemObj.width + 'px',
width: 24 + 'px'
};
t.old_active = t.active;
callback();
})
})
},
setActiveIndex() {
let t = this;
if (typeof this.list[0] === 'object' && this.rangeKey) {
let index = this.list.findIndex(item => {
return item[t.rangeKey] == t.activeKeyValue;
});
if (index > -1) {
this.active = index;
}
}
},
acitveItemClick(indx, etype, e) {
let t = this;
if (etype !== false) {
this.isOnecLoad = false;
}
if (this.list.length <= 0) return;
if (typeof this.list[indx] == 'undefined') return;
t.active = indx;
t.setLabelLeft(indx, function() {
let nowScrollToid = '';
let pqu = uni.createSelectorQuery().in(t)
pqu.select('#' + t.guid + '_' + indx)
.boundingClientRect().exec(function (pd) {
let itemObj = pd[0];
if (itemObj.left <= 0) {
t.toTargetId = itemObj.id;
} else if (itemObj.right > t.preantObjinfo.right) {
t.toTargetId = itemObj.id;
} else {
t.toTargetId = null;
}
})
});
}
}
};
</script>
<style lang="scss" scoped>
.tm-tabs {
.tm-tabs-con {
position: relative;
width: 100%;
.tm-tabs-con-item-border {
height: 4px;
border-radius: 4px;
position: absolute;
margin-top: -4px;
width: 10px;
&.tm-tabs-con-item-border-trans {
transition: all 0.15s linear;
}
}
.tm-tabs-wk {
position: relative;
left: 0;
white-space: nowrap;
width: 100%;
.tm-tabs-con-item {
flex-shrink: 0;
display: inline-block;
.tm-tabs-con-item-text {
// transition: all 0.1s;
}
&.tm-tabs-con-item-rborder {
border-right: 0;
}
}
}
}
}
</style>