261 lines
9.2 KiB
JavaScript
261 lines
9.2 KiB
JavaScript
var t = function() {
|
|
function t(t, e) {
|
|
var i = [], a = !0, n = !1, s = void 0;
|
|
try {
|
|
for (var o, r = t[Symbol.iterator](); !(a = (o = r.next()).done) && (i.push(o.value),
|
|
!e || i.length !== e); a = !0) ;
|
|
} catch (t) {
|
|
n = !0, s = t;
|
|
} finally {
|
|
try {
|
|
!a && r.return && r.return();
|
|
} finally {
|
|
if (n) throw s;
|
|
}
|
|
}
|
|
return i;
|
|
}
|
|
return function(e, i) {
|
|
if (Array.isArray(e)) return e;
|
|
if (Symbol.iterator in Object(e)) return t(e, i);
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
|
};
|
|
}(), e = require("../common/component"), i = require("../mixins/touch");
|
|
|
|
(0, e.VantComponent)({
|
|
mixins: [ i.touch ],
|
|
classes: [ "nav-class", "tab-class", "tab-active-class", "line-class" ],
|
|
relation: {
|
|
name: "tab",
|
|
type: "descendant",
|
|
linked: function(t) {
|
|
this.child.push(t), this.updateTabs(this.data.tabs.concat(t.data));
|
|
},
|
|
unlinked: function(t) {
|
|
var e = this.child.indexOf(t), i = this.data.tabs;
|
|
i.splice(e, 1), this.child.splice(e, 1), this.updateTabs(i);
|
|
}
|
|
},
|
|
props: {
|
|
color: String,
|
|
sticky: Boolean,
|
|
animated: Boolean,
|
|
swipeable: Boolean,
|
|
scrollable: Boolean,
|
|
lineWidth: {
|
|
type: Number,
|
|
value: -1
|
|
},
|
|
lineHeight: {
|
|
type: Number,
|
|
value: -1
|
|
},
|
|
active: {
|
|
type: Number,
|
|
value: 0
|
|
},
|
|
type: {
|
|
type: String,
|
|
value: "line"
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
value: !0
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
value: .3
|
|
},
|
|
zIndex: {
|
|
type: Number,
|
|
value: 1
|
|
},
|
|
swipeThreshold: {
|
|
type: Number,
|
|
value: 4
|
|
},
|
|
offsetTop: {
|
|
type: Number,
|
|
value: 0
|
|
}
|
|
},
|
|
data: {
|
|
tabs: [],
|
|
lineStyle: "",
|
|
scrollLeft: 0,
|
|
trackStyle: "",
|
|
wrapStyle: "",
|
|
position: ""
|
|
},
|
|
watch: {
|
|
swipeThreshold: function() {
|
|
this.set({
|
|
scrollable: !1 !== this.data.scrollable && this.child.length > this.data.swipeThreshold
|
|
});
|
|
},
|
|
color: "setLine",
|
|
lineWidth: "setLine",
|
|
lineHeight: "setLine",
|
|
active: "setActiveTab",
|
|
animated: "setTrack",
|
|
offsetTop: "setWrapStyle"
|
|
},
|
|
beforeCreate: function() {
|
|
this.child = [];
|
|
},
|
|
mounted: function() {
|
|
var t = this;
|
|
this.setLine(!0), this.setTrack(), this.scrollIntoView(), this.getRect(".van-tabs__wrap").then(function(e) {
|
|
t.navHeight = e.height, t.observerContentScroll();
|
|
});
|
|
},
|
|
destroyed: function() {
|
|
this.createIntersectionObserver().disconnect();
|
|
},
|
|
methods: {
|
|
updateTabs: function(t) {
|
|
t = t || this.data.tabs, this.set({
|
|
tabs: t,
|
|
scrollable: !1 !== this.data.scrollable && t.length > this.data.swipeThreshold
|
|
}), this.setActiveTab();
|
|
},
|
|
trigger: function(t, e) {
|
|
this.$emit(t, {
|
|
index: e,
|
|
title: this.data.tabs[e].title
|
|
});
|
|
},
|
|
onTap: function(t) {
|
|
var e = t.currentTarget.dataset.index;
|
|
this.data.tabs[e].disabled ? this.trigger("disabled", e) : (this.trigger("click", e),
|
|
this.setActive(e));
|
|
},
|
|
setActive: function(t) {
|
|
t !== this.data.active && (this.trigger("change", t), this.set({
|
|
active: t
|
|
}), this.setActiveTab());
|
|
},
|
|
setLine: function(t) {
|
|
var e = this;
|
|
if ("line" === this.data.type) {
|
|
var i = this.data, a = i.color, n = i.active, s = i.duration, o = i.lineWidth, r = i.lineHeight;
|
|
this.getRect(".van-tab", !0).then(function(i) {
|
|
var c = i[n], l = -1 !== o ? o : c.width / 2, h = -1 !== r ? "height: " + r + "px;" : "", d = i.slice(0, n).reduce(function(t, e) {
|
|
return t + e.width;
|
|
}, 0);
|
|
d += (c.width - l) / 2;
|
|
var u = t ? "" : "transition-duration: " + s + "s; -webkit-transition-duration: " + s + "s;";
|
|
e.set({
|
|
lineStyle: "\n " + h + "\n width: " + l + "px;\n background-color: " + a + ";\n -webkit-transform: translateX(" + d + "px);\n transform: translateX(" + d + "px);\n " + u + "\n "
|
|
});
|
|
});
|
|
}
|
|
},
|
|
setTrack: function() {
|
|
var t = this, e = this.data, i = e.animated, a = e.active, n = e.duration;
|
|
if (!i) return "";
|
|
this.getRect(".van-tabs__content").then(function(e) {
|
|
var s = e.width;
|
|
t.set({
|
|
trackStyle: "\n width: " + s * t.child.length + "px;\n left: " + -1 * a * s + "px;\n transition: left " + n + "s;\n display: -webkit-box;\n display: flex;\n "
|
|
});
|
|
var o = {
|
|
width: s,
|
|
animated: i
|
|
};
|
|
t.child.forEach(function(t) {
|
|
t.set(o);
|
|
});
|
|
});
|
|
},
|
|
setActiveTab: function() {
|
|
var t = this;
|
|
this.child.forEach(function(e, i) {
|
|
var a = {
|
|
active: i === t.data.active
|
|
};
|
|
a.active && (a.inited = !0), a.active !== e.data.active && e.set(a);
|
|
}), this.set({}, function() {
|
|
t.setLine(), t.setTrack(), t.scrollIntoView();
|
|
});
|
|
},
|
|
scrollIntoView: function() {
|
|
var e = this, i = this.data, a = i.active;
|
|
i.scrollable && Promise.all([ this.getRect(".van-tab", !0), this.getRect(".van-tabs__nav") ]).then(function(i) {
|
|
var n = t(i, 2), s = n[0], o = n[1], r = s[a], c = s.slice(0, a).reduce(function(t, e) {
|
|
return t + e.width;
|
|
}, 0);
|
|
e.set({
|
|
scrollLeft: c - (o.width - r.width) / 2
|
|
});
|
|
});
|
|
},
|
|
onTouchStart: function(t) {
|
|
this.data.swipeable && this.touchStart(t);
|
|
},
|
|
onTouchMove: function(t) {
|
|
this.data.swipeable && this.touchMove(t);
|
|
},
|
|
onTouchEnd: function() {
|
|
if (this.data.swipeable) {
|
|
var t = this.data, e = t.active, i = t.tabs, a = this.direction, n = this.deltaX, s = this.offsetX;
|
|
"horizontal" === a && s >= 50 && (n > 0 && 0 !== e ? this.setActive(e - 1) : n < 0 && e !== i.length - 1 && this.setActive(e + 1));
|
|
}
|
|
},
|
|
setWrapStyle: function() {
|
|
var t = this.data, e = t.offsetTop, i = void 0;
|
|
switch (t.position) {
|
|
case "top":
|
|
i = "\n top: " + e + "px;\n position: fixed;\n ";
|
|
break;
|
|
|
|
case "bottom":
|
|
i = "\n top: auto;\n bottom: 0;\n ";
|
|
break;
|
|
|
|
default:
|
|
i = "";
|
|
}
|
|
i !== this.data.wrapStyle && this.set({
|
|
wrapStyle: i
|
|
});
|
|
},
|
|
observerContentScroll: function() {
|
|
var t = this;
|
|
if (this.data.sticky) {
|
|
var e = this.data.offsetTop, i = wx.getSystemInfoSync().windowHeight;
|
|
this.createIntersectionObserver().disconnect(), this.createIntersectionObserver().relativeToViewport({
|
|
top: -(this.navHeight + e)
|
|
}).observe(".van-tabs", function(i) {
|
|
var a = i.boundingClientRect.top;
|
|
if (!(a > e)) {
|
|
var n = i.intersectionRatio > 0 ? "top" : "bottom";
|
|
t.$emit("scroll", {
|
|
scrollTop: a + e,
|
|
isFixed: "top" === n
|
|
}), t.setPosition(n);
|
|
}
|
|
}), this.createIntersectionObserver().relativeToViewport({
|
|
bottom: -(i - 1 - e)
|
|
}).observe(".van-tabs", function(i) {
|
|
var a = i.boundingClientRect, n = a.top;
|
|
if (!(a.bottom < t.navHeight)) {
|
|
var s = i.intersectionRatio > 0 ? "top" : "";
|
|
t.$emit("scroll", {
|
|
scrollTop: n + e,
|
|
isFixed: "top" === s
|
|
}), t.setPosition(s);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
setPosition: function(t) {
|
|
var e = this;
|
|
t !== this.data.position && this.set({
|
|
position: t
|
|
}).then(function() {
|
|
e.setWrapStyle();
|
|
});
|
|
}
|
|
}
|
|
}); |