| 1 |
- {"version":3,"sources":["webpack:///D:/星火篮球维护/代码/小程序销售端/spark-sale/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?3fb2","webpack:///D:/星火篮球维护/代码/小程序销售端/spark-sale/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?e508","webpack:///D:/星火篮球维护/代码/小程序销售端/spark-sale/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?5eeb","webpack:///D:/星火篮球维护/代码/小程序销售端/spark-sale/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?9489","uni-app:///uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue","webpack:///D:/星火篮球维护/代码/小程序销售端/spark-sale/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?3ee6","webpack:///D:/星火篮球维护/代码/小程序销售端/spark-sale/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?ac29"],"names":[],"mappings":"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eAZA,yBAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAXA;AAYA,OAjBA;AAkBA,KA/BA;AAgCA;AACA,gBAjCA,0BAiCA;AACA;AACA;AACA;AACA,KArCA;AAsCA,WAtCA,qBAsCA;AACA;AACA;AACA,KAzCA;AA0CA,QA1CA,gBA0CA,KA1CA,EA0CA;AACA;AACA,KA5CA;AA6CA,UA7CA,oBA6CA;AACA;AACA,KA/CA;AAgDA,YAhDA,oBAgDA,EAhDA,EAgDA;AACA;AACA;AACA;AACA,oBADA;;AAGA;AACA;AACA;AACA;AACA,WAHA,MAGA;AACA;AACA;AACA,SAVA;AAWA,YAXA;AAYA,OAdA,CAcA;AACA;AACA;AACA,KAlEA;AAmEA;AACA,yBApEA,mCAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAFA,MAEA;AACA;AACA;AACA;AACA;AACA,KAlFA;AAmFA,SAnFA,iBAmFA,EAnFA,EAmFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAnGA;AAoGA;AACA,eArGA,uBAqGA,WArGA,EAqGA,YArGA,EAqGA,EArGA,EAqGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KA9GA;AA+GA;AACA,oBAhHA,4BAgHA,OAhHA,EAgHA;AACA;AACA;AACA;AACA;AACA;AACA,OAJA;AAKA;AACA;AACA;AACA,KA1HA,EAlMA,E;;;;;;;;;;;;;ACjDA;AAAA;AAAA;AAAA;AAAioC,CAAgB,2mCAAG,EAAC,C;;;;;;;;;;;ACArpC;AACA,OAAO,KAAU,EAAE,kBAKd","file":"uview-ui/components/u-tabs-swiper/u-tabs-swiper.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./u-tabs-swiper.vue?vue&type=template&id=9c8ef540&scoped=true&\"\nvar renderjs\nimport script from \"./u-tabs-swiper.vue?vue&type=script&lang=js&\"\nexport * from \"./u-tabs-swiper.vue?vue&type=script&lang=js&\"\nimport style0 from \"./u-tabs-swiper.vue?vue&type=style&index=0&id=9c8ef540&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\runtime\\\\componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"9c8ef540\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue\"\nexport default component.exports","export * from \"-!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\templateLoader.js??vue-loader-options!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--16-0!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\template.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-uni-app-loader\\\\page-meta.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./u-tabs-swiper.vue?vue&type=template&id=9c8ef540&scoped=true&\"","var components\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n var l0 = _vm.__map(_vm.getTabs, function(item, index) {\n var $orig = _vm.__get_orig(item)\n\n var s0 = _vm.__get_style([_vm.tabItemStyle(index)])\n\n return {\n $orig: $orig,\n s0: s0\n }\n })\n\n var s1 = _vm.showBar ? _vm.__get_style([_vm.tabBarStyle]) : null\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n l0: l0,\n s1: s1\n }\n }\n )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--12-1!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./u-tabs-swiper.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--12-1!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./u-tabs-swiper.vue?vue&type=script&lang=js&\"","<template>\r\n\t<view class=\"u-tabs\" :style=\"{\r\n\t\t\tzIndex: zIndex,\r\n\t\t\tbackground: bgColor\r\n\t\t}\">\r\n\t\t<scroll-view scroll-x class=\"u-scroll-view\" :scroll-left=\"scrollLeft\" scroll-with-animation :style=\"{ zIndex: zIndex + 1 }\">\r\n\t\t\t<view class=\"u-tabs-scroll-box\" :class=\"{'u-tabs-scorll-flex': !isScroll}\">\r\n\t\t\t\t<view class=\"u-tabs-item\" :style=\"[tabItemStyle(index)]\"\r\n\t\t\t\t v-for=\"(item, index) in getTabs\" :key=\"index\" :class=\"[preId + index]\" @tap=\"emit(index)\">\r\n\t\t\t\t\t{{ item[name] || item['name']}}\r\n\t\t\t\t</view>\r\n\t\t\t\t<view v-if=\"showBar\" class=\"u-scroll-bar\" :style=\"[tabBarStyle]\"></view>\r\n\t\t\t</view>\r\n\t\t</scroll-view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\timport colorGradient from '../../libs/function/colorGradient';\r\n\tlet color = colorGradient;\r\n\tconst {\r\n\t\twindowWidth\r\n\t} = uni.getSystemInfoSync();\r\n\tconst preId = 'UEl_';\r\n\r\n\t/**\r\n\t * tabsSwiper 全屏选项卡\r\n\t * @description 该组件内部实现主要依托于uniapp的scroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以 跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。\r\n\t * @tutorial https://www.uviewui.com/components/tabsSwiper.html\r\n\t * @property {Boolean} is-scroll tabs是否可以左右拖动（默认true）\r\n\t * @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]\r\n\t * @property {String Number} current 指定哪个tab为激活状态（默认0）\r\n\t * @property {String Number} height 导航栏的高度，单位rpx（默认80）\r\n\t * @property {String Number} font-size tab文字大小，单位rpx（默认30）\r\n\t * @property {String Number} swiper-width tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx（默认750）\r\n\t * @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）\r\n\t * @property {String} inactive-color tabs文字颜色（默认#303133）\r\n\t * @property {String Number} bar-width 滑块宽度，单位rpx（默认40）\r\n\t * @property {String Number} bar-height 滑块高度，单位rpx（默认6）\r\n\t * @property {Object} bar-style 底部滑块的样式，对象形式\r\n\t * @property {Object} active-item-style 活动tabs item的样式，对象形式\r\n\t * @property {Boolean} show-bar 是否显示底部的滑块（默认true）\r\n\t * @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）\r\n\t * @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）\r\n\t * @property {String} name 组件内部读取的list参数中的属性名，见官网说明（默认name）\r\n\t * @property {Boolean} bold 激活选项的字体是否加粗（默认true）\r\n\t * @event {Function} change 点击标签时触发\r\n\t * @example <u-tabs-swiper ref=\"tabs\" :list=\"list\" :is-scroll=\"false\"></u-tabs-swiper>\r\n\t */\r\n\texport default {\r\n\t\tname: \"u-tabs-swiper\",\r\n\t\tprops: {\r\n\t\t\t// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度\r\n\t\t\tisScroll: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\t//需循环的标签列表\r\n\t\t\tlist: {\r\n\t\t\t\ttype: Array,\r\n\t\t\t\tdefault () {\r\n\t\t\t\t\treturn [];\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 当前活动tab的索引\r\n\t\t\tcurrent: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 0\r\n\t\t\t},\r\n\t\t\t// 导航栏的高度和行高，单位rpx\r\n\t\t\theight: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 80\r\n\t\t\t},\r\n\t\t\t// 字体大小，单位rpx\r\n\t\t\tfontSize: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 30\r\n\t\t\t},\r\n\t\t\t// 过渡动画时长, 单位s\r\n\t\t\t// duration: {\r\n\t\t\t// \ttype: [Number, String],\r\n\t\t\t// \tdefault: 0.5\r\n\t\t\t// },\r\n\t\t\tswiperWidth: {\r\n\t\t\t\t//line3生效, 外部swiper的宽度, 单位rpx\r\n\t\t\t\ttype: [String, Number],\r\n\t\t\t\tdefault: 750\r\n\t\t\t},\r\n\t\t\t// 选中项的主题颜色\r\n\t\t\tactiveColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#2979ff'\r\n\t\t\t},\r\n\t\t\t// 未选中项的颜色\r\n\t\t\tinactiveColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#303133'\r\n\t\t\t},\r\n\t\t\t// 菜单底部移动的bar的宽度，单位rpx\r\n\t\t\tbarWidth: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 40\r\n\t\t\t},\r\n\t\t\t// 移动bar的高度\r\n\t\t\tbarHeight: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 6\r\n\t\t\t},\r\n\t\t\t// 单个tab的左或右内边距（各占一半），单位rpx\r\n\t\t\tgutter: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 40\r\n\t\t\t},\r\n\t\t\t// 如果是绝对定位，添加z-index值\r\n\t\t\tzIndex: {\r\n\t\t\t\ttype: [Number, String],\r\n\t\t\t\tdefault: 1\r\n\t\t\t},\r\n\t\t\t// 导航栏的背景颜色\r\n\t\t\tbgColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#ffffff'\r\n\t\t\t},\r\n\t\t\t//滚动至中心目标类型\r\n\t\t\tautoCenterMode: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: 'window'\r\n\t\t\t},\r\n\t\t\t// 读取传入的数组对象的属性\r\n\t\t\tname: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: 'name'\r\n\t\t\t},\r\n\t\t\t// 活动tab字体是否加粗\r\n\t\t\tbold: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\t// 当前活动tab item的样式\r\n\t\t\tactiveItemStyle: {\r\n\t\t\t\ttype: Object,\r\n\t\t\t\tdefault() {\r\n\t\t\t\t\treturn {}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 是否显示底部的滑块\r\n\t\t\tshowBar: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\t// 底部滑块的自定义样式\r\n\t\t\tbarStyle: {\r\n\t\t\t\ttype: Object,\r\n\t\t\t\tdefault() {\r\n\t\t\t\t\treturn {}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tscrollLeft: 0, // 滚动scroll-view的左边滚动距离\r\n\t\t\t\ttabQueryInfo: [], // 存放对tab菜单查询后的节点信息\r\n\t\t\t\twindowWidth: 0, // 屏幕宽度，单位为px\r\n\t\t\t\t//scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离\r\n\t\t\t\tanimationFinishCurrent: this.current,\r\n\t\t\t\tcomponentsWidth: 0,\r\n\t\t\t\tline3AddDx: 0,\r\n\t\t\t\tline3Dx: 0,\r\n\t\t\t\tpreId,\r\n\t\t\t\tsW: 0,\r\n\t\t\t\ttabsInfo: [],\r\n\t\t\t\tcolorGradientArr: [],\r\n\t\t\t\tcolorStep: 100 // 两个颜色之间的渐变等分\r\n\t\t\t};\r\n\t\t},\r\n\t\tcomputed: {\r\n\t\t\t// 获取当前活跃的current值\r\n\t\t\tgetCurrent() {\r\n\t\t\t\tconst current = Number(this.current);\r\n\t\t\t\t// 判断是否超出边界\r\n\t\t\t\tif (current > this.getTabs.length - 1) {\r\n\t\t\t\t\treturn this.getTabs.length - 1;\r\n\t\t\t\t}\r\n\t\t\t\tif (current < 0) return 0;\r\n\t\t\t\treturn current;\r\n\t\t\t},\r\n\t\t\tgetTabs() {\r\n\t\t\t\treturn this.list;\r\n\t\t\t},\r\n\t\t\t// 滑块需要移动的距离\r\n\t\t\tscrollBarLeft() {\r\n\t\t\t\treturn Number(this.line3Dx) + Number(this.line3AddDx);\r\n\t\t\t},\r\n\t\t\t// 滑块的宽度转为px单位\r\n\t\t\tbarWidthPx() {\r\n\t\t\t\treturn uni.upx2px(this.barWidth);\r\n\t\t\t},\r\n\t\t\t// tab的样式\r\n\t\t\ttabItemStyle() {\r\n\t\t\t\treturn (index) => {\r\n\t\t\t\t\tlet style = {\r\n\t\t\t\t\t\theight: this.height + 'rpx',\r\n\t\t\t\t\t\tlineHeight: this.height + 'rpx',\r\n\t\t\t\t\t\tpadding: `0 ${this.gutter / 2}rpx`,\r\n\t\t\t\t\t\tcolor: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,\r\n\t\t\t\t\t\tfontSize: this.fontSize + 'rpx',\r\n\t\t\t\t\t\tzIndex: this.zIndex + 2,\r\n\t\t\t\t\t\tfontWeight: (index == this.getCurrent && this.bold) ? 'bold' : 'normal'\r\n\t\t\t\t\t};\r\n\t\t\t\t\tif(index == this.getCurrent) {\r\n\t\t\t\t\t\t// 给选中的tab item添加外部自定义的样式\r\n\t\t\t\t\t\tstyle = Object.assign(style, this.activeItemStyle);\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn style;\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 底部滑块的样式\r\n\t\t\ttabBarStyle() {\r\n\t\t\t\tlet style = {\r\n\t\t\t\t\twidth: this.barWidthPx + 'px',\r\n\t\t\t\t\theight: this.barHeight + 'rpx',\r\n\t\t\t\t\tborderRadius: '100px',\r\n\t\t\t\t\tbackgroundColor: this.activeColor,\r\n\t\t\t\t\tleft: this.scrollBarLeft + 'px'\r\n\t\t\t\t};\r\n\t\t\t\treturn Object.assign(style, this.barStyle);\r\n\t\t\t}\r\n\t\t},\r\n\t\twatch: {\r\n\t\t\tcurrent(n, o) {\r\n\t\t\t\tthis.change(n);\r\n\t\t\t\tthis.setFinishCurrent(n);\r\n\t\t\t},\r\n\t\t\tlist() {\r\n\t\t\t\tthis.$nextTick(() => {\r\n\t\t\t\t\tthis.init();\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t},\r\n\t\tmounted() {\r\n\t\t\tthis.init();\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tasync init() {\r\n\t\t\t\tthis.countPx();\r\n\t\t\t\tawait this.getTabsInfo();\r\n\t\t\t\tthis.countLine3Dx();\r\n\t\t\t\tthis.getQuery(() => {\r\n\t\t\t\t\tthis.setScrollViewToCenter();\r\n\t\t\t\t});\r\n\t\t\t\t// 颜色渐变过程数组\r\n\t\t\t\tthis.colorGradientArr = color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep);\r\n\t\t\t},\r\n\t\t\t// 获取各个tab的节点信息\r\n\t\t\tgetTabsInfo() {\r\n\t\t\t\treturn new Promise((resolve, reject) => {\r\n\t\t\t\t\tlet view = uni.createSelectorQuery().in(this);\r\n\t\t\t\t\tfor (let i = 0; i < this.list.length; i++) {\r\n\t\t\t\t\t\tview.select('.' + preId + i).boundingClientRect();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tview.exec(res => {\r\n\t\t\t\t\t\tconst arr = [];\r\n\t\t\t\t\t\tfor (let i = 0; i < res.length; i++) {\r\n\t\t\t\t\t\t\t// 给每个tab添加其文字颜色属性\r\n\t\t\t\t\t\t\tres[i].color = this.inactiveColor;\r\n\t\t\t\t\t\t\t// 当前tab直接赋予activeColor\r\n\t\t\t\t\t\t\tif (i == this.getCurrent) res[i].color = this.activeColor;\r\n\t\t\t\t\t\t\tarr.push(res[i]);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tthis.tabsInfo = arr;\r\n\t\t\t\t\t\tresolve();\r\n\t\t\t\t\t});\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\t// 当swiper滑动结束，计算滑块最终要停留的位置\r\n\t\t\tcountLine3Dx() {\r\n\t\t\t\tconst tab = this.tabsInfo[this.animationFinishCurrent];\r\n\t\t\t\t// 让滑块中心点和当前tab中心重合\r\n\t\t\t\tif (tab) this.line3Dx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left;\r\n\t\t\t},\r\n\t\t\tcountPx() {\r\n\t\t\t\t// swiper宽度由rpx转为px单位，因为dx等，都是px单位\r\n\t\t\t\tthis.sW = uni.upx2px(Number(this.swiperWidth));\r\n\t\t\t},\r\n\t\t\temit(index) {\r\n\t\t\t\tthis.$emit('change', index);\r\n\t\t\t},\r\n\t\t\tchange() {\r\n\t\t\t\tthis.setScrollViewToCenter();\r\n\t\t\t},\r\n\t\t\tgetQuery(cb) {\r\n\t\t\t\ttry {\r\n\t\t\t\t\tlet view = uni.createSelectorQuery().in(this).select('.u-tabs');\r\n\t\t\t\t\tview.fields({\r\n\t\t\t\t\t\t\tsize: true\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tdata => {\r\n\t\t\t\t\t\t\tif (data) {\r\n\t\t\t\t\t\t\t\tthis.componentsWidth = data.width;\r\n\t\t\t\t\t\t\t\tif (cb && typeof cb === 'function') cb(data);\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\tthis.getQuery(cb);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t).exec();\r\n\t\t\t\t} catch (e) {\r\n\t\t\t\t\tthis.componentsWidth = windowWidth;\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 把活动tab移动到屏幕中心点\r\n\t\t\tsetScrollViewToCenter() {\r\n\t\t\t\tlet tab;\r\n\t\t\t\ttab = this.tabsInfo[this.animationFinishCurrent];\r\n\t\t\t\tif (tab) {\r\n\t\t\t\t\tlet tabCenter = tab.left + tab.width / 2;\r\n\t\t\t\t\tlet fatherWidth;\r\n\t\t\t\t\t// 活动tab移动到中心时，以屏幕还是tab组件为宽度为基准\r\n\t\t\t\t\tif (this.autoCenterMode === 'window') {\r\n\t\t\t\t\t\tfatherWidth = windowWidth;\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tfatherWidth = this.componentsWidth;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.scrollLeft = tabCenter - fatherWidth / 2;\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tsetDx(dx) {\r\n\t\t\t\tlet nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1;\r\n\t\t\t\t// 判断索引是否超出边界\r\n\t\t\t\tnextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex;\r\n\t\t\t\tnextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex;\r\n\t\t\t\tconst tab = this.tabsInfo[nextTabIndex];\r\n\t\t\t\t// 当前tab中心点x轴坐标\r\n\t\t\t\tlet nowTab = this.tabsInfo[this.animationFinishCurrent];\r\n\t\t\t\tlet nowTabX = nowTab.left + nowTab.width / 2;\r\n\t\t\t\t// 下一个tab\r\n\t\t\t\tlet nextTab = this.tabsInfo[nextTabIndex];\r\n\t\t\t\tlet nextTabX = nextTab.left + nextTab.width / 2;\r\n\t\t\t\t// 两个tab之间的距离，因为下一个tab可能在当前tab的左边或者右边，取绝对值即可\r\n\t\t\t\tlet distanceX = Math.abs(nextTabX - nowTabX);\r\n\t\t\t\tthis.line3AddDx = (dx / this.sW) * distanceX;\r\n\t\t\t\tthis.setTabColor(this.animationFinishCurrent, nextTabIndex, dx);\r\n\t\t\t},\r\n\t\t\t// 设置tab的颜色\r\n\t\t\tsetTabColor(nowTabIndex, nextTabIndex, dx) {\r\n\t\t\t\tlet colorIndex = Math.abs(Math.ceil((dx / this.sW) * 100));\r\n\t\t\t\tlet colorLength = this.colorGradientArr.length;\r\n\t\t\t\t// 处理超出索引边界的情况\r\n\t\t\t\tcolorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex;\r\n\t\t\t\t// 设置下一个tab的颜色\r\n\t\t\t\tthis.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex];\r\n\t\t\t\t// 设置当前tab的颜色\r\n\t\t\t\tthis.tabsInfo[nowTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex];\r\n\t\t\t},\r\n\t\t\t// swiper结束滑动\r\n\t\t\tsetFinishCurrent(current) {\r\n\t\t\t\t// 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况\r\n\t\t\t\tthis.tabsInfo.map((val, index) => {\r\n\t\t\t\t\tif (current == index) val.color = this.activeColor;\r\n\t\t\t\t\telse val.color = this.inactiveColor;\r\n\t\t\t\t\treturn val;\r\n\t\t\t\t});\r\n\t\t\t\tthis.line3AddDx = 0;\r\n\t\t\t\tthis.animationFinishCurrent = current;\r\n\t\t\t\tthis.countLine3Dx();\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n\t@import \"../../libs/css/style.components.scss\";\r\n\r\n\tview,\r\n\tscroll-view {\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\r\n\t.u-tabs {\r\n\t\twidth: 100%;\r\n\t\ttransition-property: background-color, color;\r\n\t}\r\n\r\n\t/* #ifndef APP-NVUE */\r\n\t::-webkit-scrollbar,\r\n\t::-webkit-scrollbar,\r\n\t::-webkit-scrollbar {\r\n\t\tdisplay: none;\r\n\t\twidth: 0 !important;\r\n\t\theight: 0 !important;\r\n\t\t-webkit-appearance: none;\r\n\t\tbackground: transparent;\r\n\t}\r\n\t/* #endif */\r\n\r\n\t/* #ifdef H5 */\r\n\t// 通过样式穿透，隐藏H5下，scroll-view下的滚动条\r\n\tscroll-view ::v-deep ::-webkit-scrollbar {\r\n\t\tdisplay: none;\r\n\t\twidth: 0 !important;\r\n\t\theight: 0 !important;\r\n\t\t-webkit-appearance: none;\r\n\t\tbackground: transparent;\r\n\t}\r\n\r\n\t/* #endif */\r\n\r\n\t.u-scroll-view {\r\n\t\twidth: 100%;\r\n\t\twhite-space: nowrap;\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.u-tabs-scroll-box {\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.u-tabs-scorll-flex {\r\n\t\t@include vue-flex;\r\n\t\tjustify-content: space-between;\r\n\t}\r\n\r\n\t.u-tabs-scorll-flex .u-tabs-item {\r\n\t\tflex: 1;\r\n\t}\r\n\r\n\t.u-tabs-item {\r\n\t\tposition: relative;\r\n\t\tdisplay: inline-block;\r\n\t\ttext-align: center;\r\n\t\ttransition-property: background-color, color, font-weight;\r\n\t}\r\n\r\n\t.content {\r\n\t\toverflow: hidden;\r\n\t\twhite-space: nowrap;\r\n\t\ttext-overflow: ellipsis;\r\n\t}\r\n\r\n\t.boxStyle {\r\n\t\tpointer-events: none;\r\n\t\tposition: absolute;\r\n\t\ttransition-property: all;\r\n\t}\r\n\r\n\t.boxStyle2 {\r\n\t\tpointer-events: none;\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\ttransition-property: all;\r\n\t\ttransform: translateY(-100%);\r\n\t}\r\n\r\n\t.itemBackgroundBox {\r\n\t\tpointer-events: none;\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\ttransition-property: left, background-color;\r\n\t\t@include vue-flex;\r\n\t\tflex-direction: row;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t}\r\n\r\n\t.itemBackground {\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\t\ttransition-property: all;\r\n\t}\r\n\r\n\t.u-scroll-bar {\r\n\t\tposition: absolute;\r\n\t\tbottom: 4rpx;\r\n\t}\r\n</style>\r\n","import mod from \"-!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./u-tabs-swiper.vue?vue&type=style&index=0&id=9c8ef540&scoped=true&lang=scss&\"; export default mod; export * from \"-!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!E:\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./u-tabs-swiper.vue?vue&type=style&index=0&id=9c8ef540&scoped=true&lang=scss&\"","// extracted by mini-css-extract-plugin\n if(module.hot) {\n // 1631763038390\n var cssReload = require(\"E:/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"../../\",\"locals\":false});\n module.hot.dispose(cssReload);\n module.hot.accept(undefined, cssReload);\n }\n "],"sourceRoot":""}
|
