| 提交 | 用户 | age | ||
| 67dc7b | 1 | 'use strict'; |
| S | 2 | Object.defineProperty(exports, '__esModule', { value: true }); |
| 3 | var component_1 = require('../common/component'); | |
| 4 | var touch_1 = require('../mixins/touch'); | |
| 5 | var utils_1 = require('../common/utils'); | |
| 6 | component_1.VantComponent({ | |
| 7 | mixins: [touch_1.touch], | |
| 8 | classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'], | |
| 9 | relation: { | |
| 10 | name: 'tab', | |
| 11 | type: 'descendant', | |
| 12 | current: 'tabs', | |
| 13 | linked: function (target) { | |
| 14 | target.index = this.children.length - 1; | |
| 15 | this.updateTabs(); | |
| 16 | }, | |
| 17 | unlinked: function () { | |
| 18 | this.children = this.children.map(function (child, index) { | |
| 19 | child.index = index; | |
| 20 | return child; | |
| 21 | }); | |
| 22 | this.updateTabs(); | |
| 23 | }, | |
| 24 | }, | |
| 25 | props: { | |
| 26 | sticky: Boolean, | |
| 27 | border: Boolean, | |
| 28 | swipeable: Boolean, | |
| 29 | titleActiveColor: String, | |
| 30 | titleInactiveColor: String, | |
| 31 | color: String, | |
| 32 | animated: { | |
| 33 | type: Boolean, | |
| 34 | observer: function () { | |
| 35 | var _this = this; | |
| 36 | this.children.forEach(function (child, index) { | |
| 37 | return child.updateRender(index === _this.data.currentIndex, _this); | |
| 38 | }); | |
| 39 | }, | |
| 40 | }, | |
| 41 | lineWidth: { | |
| 42 | type: [String, Number], | |
| 43 | value: 40, | |
| 44 | observer: 'setLine', | |
| 45 | }, | |
| 46 | lineHeight: { | |
| 47 | type: [String, Number], | |
| 48 | value: -1, | |
| 49 | }, | |
| 50 | active: { | |
| 51 | type: [String, Number], | |
| 52 | value: 0, | |
| 53 | observer: function (name) { | |
| 54 | if (name !== this.getCurrentName()) { | |
| 55 | this.setCurrentIndexByName(name); | |
| 56 | } | |
| 57 | }, | |
| 58 | }, | |
| 59 | type: { | |
| 60 | type: String, | |
| 61 | value: 'line', | |
| 62 | }, | |
| 63 | ellipsis: { | |
| 64 | type: Boolean, | |
| 65 | value: true, | |
| 66 | }, | |
| 67 | duration: { | |
| 68 | type: Number, | |
| 69 | value: 0.3, | |
| 70 | }, | |
| 71 | zIndex: { | |
| 72 | type: Number, | |
| 73 | value: 1, | |
| 74 | }, | |
| 75 | swipeThreshold: { | |
| 76 | type: Number, | |
| 77 | value: 5, | |
| 78 | observer: function (value) { | |
| 79 | this.setData({ | |
| 80 | scrollable: this.children.length > value || !this.data.ellipsis, | |
| 81 | }); | |
| 82 | }, | |
| 83 | }, | |
| 84 | offsetTop: { | |
| 85 | type: Number, | |
| 86 | value: 0, | |
| 87 | }, | |
| 88 | lazyRender: { | |
| 89 | type: Boolean, | |
| 90 | value: true, | |
| 91 | }, | |
| 92 | }, | |
| 93 | data: { | |
| 94 | tabs: [], | |
| 95 | lineStyle: '', | |
| 96 | scrollLeft: 0, | |
| 97 | scrollable: false, | |
| 98 | trackStyle: '', | |
| 99 | currentIndex: 0, | |
| 100 | container: null, | |
| 101 | skipTransition: true, | |
| 102 | lineOffsetLeft: 0, | |
| 103 | }, | |
| 104 | mounted: function () { | |
| 105 | var _this = this; | |
| 106 | wx.nextTick(function () { | |
| 107 | _this.setLine(true); | |
| 108 | _this.scrollIntoView(); | |
| 109 | }); | |
| 110 | }, | |
| 111 | methods: { | |
| 112 | updateContainer: function () { | |
| 113 | var _this = this; | |
| 114 | this.setData({ | |
| 115 | container: function () { | |
| 116 | return _this.createSelectorQuery().select('.van-tabs'); | |
| 117 | }, | |
| 118 | }); | |
| 119 | }, | |
| 120 | updateTabs: function () { | |
| 121 | var _a = this, | |
| 122 | _b = _a.children, | |
| 123 | children = _b === void 0 ? [] : _b, | |
| 124 | data = _a.data; | |
| 125 | this.setData({ | |
| 126 | tabs: children.map(function (child) { | |
| 127 | return child.data; | |
| 128 | }), | |
| 129 | scrollable: | |
| 130 | this.children.length > data.swipeThreshold || !data.ellipsis, | |
| 131 | }); | |
| 132 | this.setCurrentIndexByName(this.getCurrentName() || data.active); | |
| 133 | }, | |
| 134 | trigger: function (eventName, child) { | |
| 135 | var currentIndex = this.data.currentIndex; | |
| 136 | var currentChild = child || this.children[currentIndex]; | |
| 137 | if (!utils_1.isDef(currentChild)) { | |
| 138 | return; | |
| 139 | } | |
| 140 | this.$emit(eventName, { | |
| 141 | index: currentChild.index, | |
| 142 | name: currentChild.getComputedName(), | |
| 143 | title: currentChild.data.title, | |
| 144 | }); | |
| 145 | }, | |
| 146 | onTap: function (event) { | |
| 147 | var _this = this; | |
| 148 | var index = event.currentTarget.dataset.index; | |
| 149 | var child = this.children[index]; | |
| 150 | if (child.data.disabled) { | |
| 151 | this.trigger('disabled', child); | |
| 152 | } else { | |
| 153 | this.setCurrentIndex(index); | |
| 154 | wx.nextTick(function () { | |
| 155 | _this.trigger('click'); | |
| 156 | }); | |
| 157 | } | |
| 158 | }, | |
| 159 | // correct the index of active tab | |
| 160 | setCurrentIndexByName: function (name) { | |
| 161 | var _a = this.children, | |
| 162 | children = _a === void 0 ? [] : _a; | |
| 163 | var matched = children.filter(function (child) { | |
| 164 | return child.getComputedName() === name; | |
| 165 | }); | |
| 166 | if (matched.length) { | |
| 167 | this.setCurrentIndex(matched[0].index); | |
| 168 | } | |
| 169 | }, | |
| 170 | setCurrentIndex: function (currentIndex) { | |
| 171 | var _this = this; | |
| 172 | var _a = this, | |
| 173 | data = _a.data, | |
| 174 | _b = _a.children, | |
| 175 | children = _b === void 0 ? [] : _b; | |
| 176 | if ( | |
| 177 | !utils_1.isDef(currentIndex) || | |
| 178 | currentIndex >= children.length || | |
| 179 | currentIndex < 0 | |
| 180 | ) { | |
| 181 | return; | |
| 182 | } | |
| 183 | children.forEach(function (item, index) { | |
| 184 | var active = index === currentIndex; | |
| 185 | if (active !== item.data.active || !item.inited) { | |
| 186 | item.updateRender(active, _this); | |
| 187 | } | |
| 188 | }); | |
| 189 | if (currentIndex === data.currentIndex) { | |
| 190 | return; | |
| 191 | } | |
| 192 | var shouldEmitChange = data.currentIndex !== null; | |
| 193 | this.setData({ currentIndex: currentIndex }); | |
| 194 | wx.nextTick(function () { | |
| 195 | _this.setLine(); | |
| 196 | _this.scrollIntoView(); | |
| 197 | _this.updateContainer(); | |
| 198 | _this.trigger('input'); | |
| 199 | if (shouldEmitChange) { | |
| 200 | _this.trigger('change'); | |
| 201 | } | |
| 202 | }); | |
| 203 | }, | |
| 204 | getCurrentName: function () { | |
| 205 | var activeTab = this.children[this.data.currentIndex]; | |
| 206 | if (activeTab) { | |
| 207 | return activeTab.getComputedName(); | |
| 208 | } | |
| 209 | }, | |
| 210 | setLine: function (skipTransition) { | |
| 211 | var _this = this; | |
| 212 | if (skipTransition === void 0) { | |
| 213 | skipTransition = false; | |
| 214 | } | |
| 215 | if (this.data.type !== 'line') { | |
| 216 | return; | |
| 217 | } | |
| d34532 | 218 | var _a = this.data, |
| S | 219 | currentIndex = _a.currentIndex, |
| 220 | ellipsis = _a.ellipsis; | |
| 67dc7b | 221 | Promise.all([ |
| S | 222 | utils_1.getAllRect.call(this, '.van-tab'), |
| 223 | utils_1.getRect.call(this, '.van-tabs__line'), | |
| 224 | ]).then(function (_a) { | |
| 225 | var _b = _a[0], | |
| 226 | rects = _b === void 0 ? [] : _b, | |
| 227 | lineRect = _a[1]; | |
| 228 | var rect = rects[currentIndex]; | |
| 229 | if (rect == null) { | |
| 230 | return; | |
| 231 | } | |
| 232 | var lineOffsetLeft = rects | |
| 233 | .slice(0, currentIndex) | |
| 234 | .reduce(function (prev, curr) { | |
| 235 | return prev + curr.width; | |
| 236 | }, 0); | |
| d34532 | 237 | lineOffsetLeft += |
| S | 238 | (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8); |
| 67dc7b | 239 | _this.setData({ |
| S | 240 | lineOffsetLeft: lineOffsetLeft, |
| 241 | skipTransition: skipTransition, | |
| 242 | }); | |
| 243 | }); | |
| 244 | }, | |
| 245 | // scroll active tab into view | |
| 246 | scrollIntoView: function () { | |
| 247 | var _this = this; | |
| 248 | var _a = this.data, | |
| 249 | currentIndex = _a.currentIndex, | |
| 250 | scrollable = _a.scrollable; | |
| 251 | if (!scrollable) { | |
| 252 | return; | |
| 253 | } | |
| 254 | Promise.all([ | |
| 255 | utils_1.getAllRect.call(this, '.van-tab'), | |
| 256 | utils_1.getRect.call(this, '.van-tabs__nav'), | |
| 257 | ]).then(function (_a) { | |
| 258 | var tabRects = _a[0], | |
| 259 | navRect = _a[1]; | |
| 260 | var tabRect = tabRects[currentIndex]; | |
| 261 | var offsetLeft = tabRects | |
| 262 | .slice(0, currentIndex) | |
| 263 | .reduce(function (prev, curr) { | |
| 264 | return prev + curr.width; | |
| 265 | }, 0); | |
| 266 | _this.setData({ | |
| 267 | scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2, | |
| 268 | }); | |
| 269 | }); | |
| 270 | }, | |
| 271 | onTouchScroll: function (event) { | |
| 272 | this.$emit('scroll', event.detail); | |
| 273 | }, | |
| 274 | onTouchStart: function (event) { | |
| 275 | if (!this.data.swipeable) return; | |
| 276 | this.touchStart(event); | |
| 277 | }, | |
| 278 | onTouchMove: function (event) { | |
| 279 | if (!this.data.swipeable) return; | |
| 280 | this.touchMove(event); | |
| 281 | }, | |
| 282 | // watch swipe touch end | |
| 283 | onTouchEnd: function () { | |
| 284 | if (!this.data.swipeable) return; | |
| 285 | var _a = this, | |
| 286 | direction = _a.direction, | |
| 287 | deltaX = _a.deltaX, | |
| 288 | offsetX = _a.offsetX; | |
| 289 | var minSwipeDistance = 50; | |
| 290 | if (direction === 'horizontal' && offsetX >= minSwipeDistance) { | |
| 291 | var index = this.getAvaiableTab(deltaX); | |
| 292 | if (index !== -1) { | |
| 293 | this.setCurrentIndex(index); | |
| 294 | } | |
| 295 | } | |
| 296 | }, | |
| 297 | getAvaiableTab: function (direction) { | |
| 298 | var _a = this.data, | |
| 299 | tabs = _a.tabs, | |
| 300 | currentIndex = _a.currentIndex; | |
| 301 | var step = direction > 0 ? -1 : 1; | |
| 302 | for ( | |
| 303 | var i = step; | |
| 304 | currentIndex + i < tabs.length && currentIndex + i >= 0; | |
| 305 | i += step | |
| 306 | ) { | |
| 307 | var index = currentIndex + i; | |
| 308 | if ( | |
| 309 | index >= 0 && | |
| 310 | index < tabs.length && | |
| 311 | tabs[index] && | |
| 312 | !tabs[index].disabled | |
| 313 | ) { | |
| 314 | return index; | |
| 315 | } | |
| 316 | } | |
| 317 | return -1; | |
| 318 | }, | |
| 319 | }, | |
| 320 | }); | |
