397 lines
9.8 KiB
JavaScript
397 lines
9.8 KiB
JavaScript
"use strict";
|
||
const common_vendor = require("../../../common/vendor.js");
|
||
const _sfc_main = {
|
||
name: "fui-vtabs",
|
||
emits: ["click", "change", "scrolltolower"],
|
||
props: {
|
||
vtabs: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
nameKey: {
|
||
type: String,
|
||
default: "name"
|
||
},
|
||
badgeKey: {
|
||
type: String,
|
||
default: "badge"
|
||
},
|
||
iconKey: {
|
||
type: String,
|
||
default: "icon"
|
||
},
|
||
activeIconKey: {
|
||
type: String,
|
||
default: "activeIcon"
|
||
},
|
||
width: {
|
||
type: [Number, String],
|
||
default: "0"
|
||
},
|
||
height: {
|
||
type: [Number, String],
|
||
default: "0"
|
||
},
|
||
tabWidth: {
|
||
type: [Number, String],
|
||
default: 220
|
||
},
|
||
tabHeight: {
|
||
type: [Number, String],
|
||
default: 110
|
||
},
|
||
size: {
|
||
type: [Number, String],
|
||
default: 26
|
||
},
|
||
activeSize: {
|
||
type: [Number, String],
|
||
default: 26
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: "#333333"
|
||
},
|
||
activeColor: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
fontWeight: {
|
||
type: [Number, String],
|
||
default: "normal"
|
||
},
|
||
activeFontWeight: {
|
||
type: [Number, String],
|
||
default: "normal"
|
||
},
|
||
background: {
|
||
type: String,
|
||
default: "#eeeeee"
|
||
},
|
||
activeBgColor: {
|
||
type: String,
|
||
default: "#ffffff"
|
||
},
|
||
isBorder: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
borderColor: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
activeTab: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
animation: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
badgeColor: {
|
||
type: String,
|
||
default: "#fff"
|
||
},
|
||
badgeBackground: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
isDot: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//是否联动，为false时content只需展示对应索引数据
|
||
linkage: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
provide() {
|
||
return {
|
||
vtabs: this
|
||
};
|
||
},
|
||
computed: {
|
||
getActiveColor() {
|
||
let color = this.activeColor;
|
||
return color;
|
||
},
|
||
getBorderColor() {
|
||
let color = this.borderColor;
|
||
return color;
|
||
},
|
||
getBadgeBackground() {
|
||
let color = this.badgeBackground;
|
||
return color;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
vals: [],
|
||
scrollInto: "",
|
||
current: 0,
|
||
contentScrollTop: 0,
|
||
// contentScrollInto: '',
|
||
heightRecords: [],
|
||
contentHeight: {},
|
||
vtabsW: "320px",
|
||
vtabsH: "600px",
|
||
isTap: false
|
||
};
|
||
},
|
||
watch: {
|
||
vtabs(vals) {
|
||
this.initData(vals);
|
||
},
|
||
activeTab(newVal, oldVal) {
|
||
if (this.linkage) {
|
||
this.setDefaultTab(newVal);
|
||
} else {
|
||
this.switchTab(newVal, true);
|
||
}
|
||
},
|
||
current(val) {
|
||
this.scrollTabBar(val);
|
||
},
|
||
height(val) {
|
||
this.setHeight(val);
|
||
},
|
||
width(val) {
|
||
this.setWidth(val);
|
||
}
|
||
},
|
||
created() {
|
||
this.children = [];
|
||
this.setWidth(this.width);
|
||
this.setHeight(this.height);
|
||
this.calcHeightTimer = null;
|
||
this.scrollTimer = null;
|
||
this.initData(this.vtabs);
|
||
},
|
||
methods: {
|
||
setWidth(width) {
|
||
let res = common_vendor.index.getSystemInfoSync();
|
||
if (width == 0 || width == "0px" || width == "0rpx") {
|
||
this.vtabsW = res.windowWidth + "px";
|
||
} else {
|
||
this.vtabsW = width;
|
||
}
|
||
},
|
||
setHeight(height) {
|
||
let res = common_vendor.index.getSystemInfoSync();
|
||
if (height == 0 || height == "0px" || height == "0rpx") {
|
||
this.vtabsH = res.windowHeight + "px";
|
||
} else {
|
||
this.vtabsH = height;
|
||
}
|
||
},
|
||
setDefaultTab(index, idx = 0) {
|
||
let len = this.vtabs.length;
|
||
if (this.heightRecords.length === len && len > 0) {
|
||
this.switchTab(index, true);
|
||
} else {
|
||
if (idx >= 100)
|
||
return;
|
||
idx++;
|
||
setTimeout(() => {
|
||
this.setDefaultTab(index, idx);
|
||
}, 250);
|
||
}
|
||
},
|
||
initData(vals) {
|
||
if (vals && vals.length > 0) {
|
||
if (typeof vals[0] !== "object") {
|
||
const key = this.nameKey || "name";
|
||
vals = vals.map((item) => {
|
||
return {
|
||
[key]: item
|
||
};
|
||
});
|
||
}
|
||
this.vals = vals;
|
||
this.$nextTick(() => {
|
||
if (this.linkage) {
|
||
setTimeout(() => {
|
||
this.setDefaultTab(this.activeTab);
|
||
}, 50);
|
||
} else {
|
||
this.switchTab(this.activeTab, true);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
scrollTabBar(index) {
|
||
let len = this.vtabs.length;
|
||
if (len === 0)
|
||
return;
|
||
index = index < 6 ? 0 : index - 5;
|
||
if (index >= len)
|
||
index = len - 1;
|
||
this.scrollInto = `fui_vtabs_bar_${index}`;
|
||
},
|
||
switchTab(index, init) {
|
||
index = Number(index);
|
||
const item = {
|
||
...this.vals[index]
|
||
};
|
||
if (item.disable)
|
||
return;
|
||
if (this.linkage) {
|
||
this.contentScrollTop = this.heightRecords[this.current - 1] || 0;
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.current = index;
|
||
this.contentScrollTop = this.heightRecords[index - 1] || 0;
|
||
}, 50);
|
||
});
|
||
} else {
|
||
this.current = index;
|
||
}
|
||
if (!init) {
|
||
this.isTap = true;
|
||
this.$emit("click", {
|
||
index,
|
||
...item
|
||
});
|
||
}
|
||
},
|
||
calcHeight() {
|
||
let len = this.vtabs.length;
|
||
let _heightRecords = [];
|
||
let temp = 0;
|
||
for (let i = 0; i < len; i++) {
|
||
_heightRecords[i] = temp + (this.contentHeight[i] || 0);
|
||
temp = _heightRecords[i];
|
||
}
|
||
this.heightRecords = _heightRecords;
|
||
},
|
||
contentScroll(e) {
|
||
if (!this.linkage)
|
||
return;
|
||
if (this.isTap) {
|
||
if (this.scrollTimer) {
|
||
clearTimeout(this.scrollTimer);
|
||
}
|
||
this.scrollTimer = setTimeout(() => {
|
||
this.isTap = false;
|
||
}, 50);
|
||
return;
|
||
}
|
||
let _heightRecords = this.heightRecords;
|
||
if (_heightRecords.length === 0)
|
||
return;
|
||
let len = this.vtabs.length;
|
||
let scrollTop = e.detail.scrollTop + (len - 1) * 0.19;
|
||
let index = 0;
|
||
if (scrollTop >= _heightRecords[0]) {
|
||
for (let i = 1; i < len; i++) {
|
||
if (scrollTop >= _heightRecords[i - 1] && scrollTop < _heightRecords[i]) {
|
||
index = i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (index != this.current) {
|
||
const item = {
|
||
...this.vals[index]
|
||
};
|
||
this.$emit("change", {
|
||
index,
|
||
...item
|
||
});
|
||
this.current = index;
|
||
}
|
||
},
|
||
getCalcHeight(height, index) {
|
||
this.contentHeight[index] = height;
|
||
if (this.calcHeightTimer) {
|
||
clearTimeout(this.calcHeightTimer);
|
||
}
|
||
this.calcHeightTimer = setTimeout(() => {
|
||
this.calcHeight();
|
||
}, 150);
|
||
},
|
||
uninstall(tabIndex, target) {
|
||
this.children.forEach((item, index) => {
|
||
if (item === target) {
|
||
this.children.splice(index, 1);
|
||
}
|
||
});
|
||
delete this.contentHeight[tabIndex];
|
||
this.calcHeight();
|
||
},
|
||
//重置列表高度信息
|
||
reset() {
|
||
if (this.linkage) {
|
||
this.children.forEach((item, index) => {
|
||
item.calcHeight((height) => {
|
||
this.getCalcHeight(height, Number(item.tabIndex));
|
||
});
|
||
});
|
||
}
|
||
},
|
||
onScrolltolower(e) {
|
||
if (!this.linkage) {
|
||
this.$emit("scrolltolower", e);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||
return {
|
||
a: common_vendor.f($data.vals, (item, index, i0) => {
|
||
return common_vendor.e({
|
||
a: item[$props.iconKey]
|
||
}, item[$props.iconKey] ? {
|
||
b: (item.iconWidth || 40) + "rpx",
|
||
c: (item.iconHeight || 40) + "rpx",
|
||
d: $data.current === index && item[$props.activeIconKey] ? item[$props.activeIconKey] : item[$props.iconKey]
|
||
} : {}, {
|
||
e: common_vendor.t(item[$props.nameKey]),
|
||
f: item[$props.badgeKey]
|
||
}, item[$props.badgeKey] ? {
|
||
g: common_vendor.t($props.isDot ? "" : item[$props.badgeKey]),
|
||
h: !$options.getBadgeBackground ? 1 : "",
|
||
i: $props.isDot ? 1 : "",
|
||
j: !$props.isDot ? 1 : "",
|
||
k: $props.badgeColor,
|
||
l: $options.getBadgeBackground
|
||
} : {}, {
|
||
m: !$options.getActiveColor && $data.current === index ? 1 : "",
|
||
n: ($data.current === index ? $props.activeSize : $props.size) + "rpx",
|
||
o: $data.current === index ? $options.getActiveColor : $props.color,
|
||
p: $data.current === index ? $props.activeFontWeight : $props.fontWeight,
|
||
q: !item.disable ? 1 : "",
|
||
r: item.disable ? 1 : "",
|
||
s: !$options.getBorderColor && $data.current === index && $props.isBorder ? 1 : "",
|
||
t: "fui_vtabs_bar_" + index,
|
||
v: index,
|
||
w: $data.current === index ? $props.activeBgColor : $props.background,
|
||
x: $data.current === index && $props.isBorder ? $options.getBorderColor : "transparent",
|
||
y: common_vendor.o(($event) => $options.switchTab(index), index)
|
||
});
|
||
}),
|
||
b: $props.isBorder ? 1 : "",
|
||
c: $props.tabWidth + "rpx",
|
||
d: $props.tabHeight + "rpx",
|
||
e: $props.tabWidth + "rpx",
|
||
f: $props.tabWidth + "rpx",
|
||
g: $data.vtabsH,
|
||
h: $data.scrollInto,
|
||
i: $data.isTap,
|
||
j: $props.tabWidth + "rpx",
|
||
k: $props.background,
|
||
l: $data.vtabsH,
|
||
m: $data.contentScrollTop,
|
||
n: $props.animation,
|
||
o: common_vendor.o((...args) => $options.contentScroll && $options.contentScroll(...args)),
|
||
p: common_vendor.o((...args) => $options.onScrolltolower && $options.onScrolltolower(...args)),
|
||
q: $data.vtabsW,
|
||
r: $data.vtabsH
|
||
};
|
||
}
|
||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d30634da"]]);
|
||
wx.createComponent(Component);
|