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