1 line
28 KiB
Plaintext
1 line
28 KiB
Plaintext
{"version":3,"sources":["webpack:///D:/uni-app/program/智汇谷人才服务/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?b8be","webpack:///D:/uni-app/program/智汇谷人才服务/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?423c","webpack:///D:/uni-app/program/智汇谷人才服务/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?4e16","webpack:///D:/uni-app/program/智汇谷人才服务/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?f8eb","uni-app:///uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue","webpack:///D:/uni-app/program/智汇谷人才服务/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?cda0","webpack:///D:/uni-app/program/智汇谷人才服务/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue?e6b0"],"names":["windowWidth","name","props","isScroll","type","default","list","current","height","fontSize","swiperWidth","activeColor","inactiveColor","barWidth","barHeight","gutter","zIndex","bgColor","autoCenterMode","count","offset","bold","activeItemStyle","showBar","barStyle","data","scrollLeft","tabQueryInfo","animationFinishCurrent","componentsWidth","line3AddDx","line3Dx","preId","sW","tabsInfo","colorGradientArr","colorStep","computed","getCurrent","getTabs","scrollBarLeft","barWidthPx","tabItemStyle","lineHeight","padding","color","fontWeight","style","tabBarStyle","width","borderRadius","backgroundColor","left","watch","mounted","methods","init","getTabsInfo","view","res","arr","resolve","countLine3Dx","countPx","emit","change","getQuery","size","setScrollViewToCenter","tab","fatherWidth","setDx","nextTabIndex","setTabColor","colorIndex","setFinishCurrent","val"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAsI;AACtI;AACiE;AACL;AACsC;;;AAGlG;AACsK;AACtK,gBAAgB,6KAAU;AAC1B,EAAE,mFAAM;AACR,EAAE,oGAAM;AACR,EAAE,6GAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,wGAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA,aAAa,6MAEN;AACP,KAAK;AACL;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACnDA;AAAA;AAAA;AAAA;AAAynB,CAAgB,unBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;ACmB7oB;;;;;;;;;;;;;;;;;;;;AACA;AACA;EAAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAzBA,gBA0BA;EACAC;EACAC;IACA;IACAC;MACAC;MACAC;IACA;IACA;IACAC;MACAF;MACAC;QACA;MACA;IACA;IACA;IACAE;MACAH;MACAC;IACA;IACA;IACAG;MACAJ;MACAC;IACA;IACA;IACAI;MACAL;MACAC;IACA;IACA;IACA;IACA;IACA;IACA;IACAK;MACA;MACAN;MACAC;IACA;IACA;IACAM;MACAP;MACAC;IACA;IACA;IACAO;MACAR;MACAC;IACA;IACA;IACAQ;MACAT;MACAC;IACA;IACA;IACAS;MACAV;MACAC;IACA;IACA;IACAU;MACAX;MACAC;IACA;IACA;IACAW;MACAZ;MACAC;IACA;IACA;IACAY;MACAb;MACAC;IACA;IACA;IACAa;MACAd;MACAC;IACA;IACA;IACAJ;MACAG;MACAC;IACA;IACA;IACAc;MACAf;MACAC;IACA;IACA;IACAe;MACAhB;MACAC;QACA;MACA;IACA;IACA;IACAgB;MACAjB;MACAC;IACA;IACA;IACAiB;MACAlB;MACAC;QACA;MACA;IACA;IACA;IACAkB;MACAnB;MACAC;IACA;IACA;IACAmB;MACApB;MACAC;QACA;MACA;IACA;EACA;EACAoB;IACA;MACAC;MAAA;MACAC;MAAA;MACA3B;MAAA;MACA;MACA4B;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;IACA;EACA;;EACAC;IACA;IACAC;MACA;MACA;MACA;QACA;MACA;MACA;MACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;UACAlC;UACAmC;UACAC;UACAC;UACApC;UACAO;UACA8B;QACA;QACA;UACA;UACAC;QACA;QACA;MACA;IACA;IACA;IACAC;MACA;QACAC;QACAzC;QACA0C;QACAC;QACAC;MACA;MACA;IACA;EACA;EACAC;IACA9C;MACA;MACA;IACA;IACAD;MAAA;MACA;QACA;MACA;IACA;EACA;EACAgD;IACA;EACA;EACAC;IACAC;MAAA;MAAA;QAAA;UAAA;YAAA;cAAA;gBACA;gBAAA;gBAAA,OACA;cAAA;gBACA;gBACA;kBACA;gBACA;gBACA;gBACA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IACA;IACA;IACAC;MAAA;MACA;QACA;QACA;UACAC;QACA;QACAA;UACA;UACA;YACA;YACAC;YACA;YACA;YACAC;UACA;UACA;UACAC;QACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;IACA;IACAC;MACA;MACA;IACA;IACAC;MACA;IACA;IACAC;MACA;IACA;IACAC;MAAA;MACA;QACA;QACAR;UACAS;QACA,GACA;UACA;YACA;YACA;UACA;YACA;UACA;QACA,EACA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;MACAC;MACA;QACA;QACA;QACA;QACA;UACAC;QACA;UACAA;QACA;QACA;MACA;IACA;IACAC;MACA;MACA;MACAC;MACAA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;MACAC;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;QACA,0DACAC;QACA;MACA;MACA;MACA;MACA;IACA;EACA;AACA;AAAA,4B;;;;;;;;;;;;;AC5XA;AAAA;AAAA;AAAA;AAAwsC,CAAgB,8nCAAG,EAAC,C;;;;;;;;;;;ACA5tC;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 \"!../../../../../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 \"-!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--17-0!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../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\ntry {\n components = {\n uBadge: function () {\n return import(\n /* webpackChunkName: \"uview-ui/components/u-badge/u-badge\" */ \"@/uview-ui/components/u-badge/u-badge.vue\"\n )\n },\n }\n} catch (e) {\n if (\n e.message.indexOf(\"Cannot find module\") !== -1 &&\n e.message.indexOf(\".vue\") !== -1\n ) {\n console.error(e.message)\n console.error(\"1. 排查组件名称拼写是否正确\")\n console.error(\n \"2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom\"\n )\n console.error(\n \"3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件\"\n )\n } else {\n throw e\n }\n}\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 var s0 = _vm.__get_style([_vm.tabItemStyle(index)])\n return {\n $orig: $orig,\n s0: s0,\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 \"-!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../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 \"-!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./u-tabs-swiper.vue?vue&type=script&lang=js&\"","<template>\n\t<view class=\"u-tabs\" :style=\"{\n\t\t\tzIndex: zIndex,\n\t\t\tbackground: bgColor\n\t\t}\">\n\t\t<scroll-view scroll-x class=\"u-scroll-view\" :scroll-left=\"scrollLeft\" scroll-with-animation :style=\"{ zIndex: zIndex + 1 }\">\n\t\t\t<view class=\"u-tabs-scroll-box\" :class=\"{'u-tabs-scorll-flex': !isScroll}\">\n\t\t\t\t<view class=\"u-tabs-item\" :style=\"[tabItemStyle(index)]\"\n\t\t\t\t v-for=\"(item, index) in getTabs\" :key=\"index\" :class=\"[preId + index]\" @tap=\"emit(index)\">\n\t\t\t\t\t<u-badge :count=\"item[count] || item['count'] || 0\" :offset=\"offset\" size=\"mini\"></u-badge>\n\t\t\t\t\t{{ item[name] || item['name']}}\n\t\t\t\t</view>\n\t\t\t\t<view v-if=\"showBar\" class=\"u-scroll-bar\" :style=\"[tabBarStyle]\"></view>\n\t\t\t</view>\n\t\t</scroll-view>\n\t</view>\n</template>\n\n<script>\n\timport colorGradient from '../../libs/function/colorGradient';\n\tlet color = colorGradient;\n\tconst { windowWidth } = uni.getSystemInfoSync();\n\tconst preId = 'UEl_';\n\n\t/**\n\t * tabsSwiper 全屏选项卡\n\t * @description 该组件内部实现主要依托于uniapp的scroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以 跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。\n\t * @tutorial https://www.uviewui.com/components/tabsSwiper.html\n\t * @property {Boolean} is-scroll tabs是否可以左右拖动（默认true）\n\t * @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]\n\t * @property {String Number} current 指定哪个tab为激活状态（默认0）\n\t * @property {String Number} height 导航栏的高度，单位rpx（默认80）\n\t * @property {String Number} font-size tab文字大小，单位rpx（默认30）\n\t * @property {String Number} swiper-width tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx（默认750）\n\t * @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）\n\t * @property {String} inactive-color tabs文字颜色（默认#303133）\n\t * @property {String Number} bar-width 滑块宽度，单位rpx（默认40）\n\t * @property {String Number} bar-height 滑块高度，单位rpx（默认6）\n\t * @property {Object} bar-style 底部滑块的样式，对象形式\n\t * @property {Object} active-item-style 活动tabs item的样式，对象形式\n\t * @property {Boolean} show-bar 是否显示底部的滑块（默认true）\n\t * @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）\n\t * @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）\n\t * @property {String} name 组件内部读取的list参数中的属性名，见官网说明（默认name）\n\t * @property {String} count 组件内部读取的list参数中的属性名（badge徽标数），同name属性的使用，见官网说明（默认count）\n\t * @property {Array} offset 设置badge徽标数的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx（默认[5, 20]）\n\t * @property {Boolean} bold 激活选项的字体是否加粗（默认true）\n\t * @event {Function} change 点击标签时触发\n\t * @example <u-tabs-swiper ref=\"tabs\" :list=\"list\" :is-scroll=\"false\"></u-tabs-swiper>\n\t */\n\texport default {\n\t\tname: \"u-tabs-swiper\",\n\t\tprops: {\n\t\t\t// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度\n\t\t\tisScroll: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true\n\t\t\t},\n\t\t\t//需循环的标签列表\n\t\t\tlist: {\n\t\t\t\ttype: Array,\n\t\t\t\tdefault () {\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t},\n\t\t\t// 当前活动tab的索引\n\t\t\tcurrent: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 0\n\t\t\t},\n\t\t\t// 导航栏的高度和行高，单位rpx\n\t\t\theight: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 80\n\t\t\t},\n\t\t\t// 字体大小，单位rpx\n\t\t\tfontSize: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 30\n\t\t\t},\n\t\t\t// 过渡动画时长, 单位s\n\t\t\t// duration: {\n\t\t\t// \ttype: [Number, String],\n\t\t\t// \tdefault: 0.5\n\t\t\t// },\n\t\t\tswiperWidth: {\n\t\t\t\t//line3生效, 外部swiper的宽度, 单位rpx\n\t\t\t\ttype: [String, Number],\n\t\t\t\tdefault: 750\n\t\t\t},\n\t\t\t// 选中项的主题颜色\n\t\t\tactiveColor: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: '#2979ff'\n\t\t\t},\n\t\t\t// 未选中项的颜色\n\t\t\tinactiveColor: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: '#303133'\n\t\t\t},\n\t\t\t// 菜单底部移动的bar的宽度，单位rpx\n\t\t\tbarWidth: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 40\n\t\t\t},\n\t\t\t// 移动bar的高度\n\t\t\tbarHeight: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 6\n\t\t\t},\n\t\t\t// 单个tab的左或右内边距（各占一半），单位rpx\n\t\t\tgutter: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 40\n\t\t\t},\n\t\t\t// 如果是绝对定位，添加z-index值\n\t\t\tzIndex: {\n\t\t\t\ttype: [Number, String],\n\t\t\t\tdefault: 1\n\t\t\t},\n\t\t\t// 导航栏的背景颜色\n\t\t\tbgColor: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: '#ffffff'\n\t\t\t},\n\t\t\t//滚动至中心目标类型\n\t\t\tautoCenterMode: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: 'window'\n\t\t\t},\n\t\t\t// 读取传入的数组对象的属性(tab名称)\n\t\t\tname: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: 'name'\n\t\t\t},\n\t\t\t// 读取传入的数组对象的属性(徽标数)\n\t\t\tcount: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: 'count'\n\t\t\t},\n\t\t\t// 徽标数位置偏移\n\t\t\toffset: {\n\t\t\t\ttype: Array,\n\t\t\t\tdefault: () => {\n\t\t\t\t\treturn [5, 20]\n\t\t\t\t}\n\t\t\t},\n\t\t\t// 活动tab字体是否加粗\n\t\t\tbold: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true\n\t\t\t},\n\t\t\t// 当前活动tab item的样式\n\t\t\tactiveItemStyle: {\n\t\t\t\ttype: Object,\n\t\t\t\tdefault() {\n\t\t\t\t\treturn {}\n\t\t\t\t}\n\t\t\t},\n\t\t\t// 是否显示底部的滑块\n\t\t\tshowBar: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true\n\t\t\t},\n\t\t\t// 底部滑块的自定义样式\n\t\t\tbarStyle: {\n\t\t\t\ttype: Object,\n\t\t\t\tdefault() {\n\t\t\t\t\treturn {}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tscrollLeft: 0, // 滚动scroll-view的左边滚动距离\n\t\t\t\ttabQueryInfo: [], // 存放对tab菜单查询后的节点信息\n\t\t\t\twindowWidth: 0, // 屏幕宽度，单位为px\n\t\t\t\t//scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离\n\t\t\t\tanimationFinishCurrent: this.current,\n\t\t\t\tcomponentsWidth: 0,\n\t\t\t\tline3AddDx: 0,\n\t\t\t\tline3Dx: 0,\n\t\t\t\tpreId,\n\t\t\t\tsW: 0,\n\t\t\t\ttabsInfo: [],\n\t\t\t\tcolorGradientArr: [],\n\t\t\t\tcolorStep: 100 // 两个颜色之间的渐变等分\n\t\t\t};\n\t\t},\n\t\tcomputed: {\n\t\t\t// 获取当前活跃的current值\n\t\t\tgetCurrent() {\n\t\t\t\tconst current = Number(this.current);\n\t\t\t\t// 判断是否超出边界\n\t\t\t\tif (current > this.getTabs.length - 1) {\n\t\t\t\t\treturn this.getTabs.length - 1;\n\t\t\t\t}\n\t\t\t\tif (current < 0) return 0;\n\t\t\t\treturn current;\n\t\t\t},\n\t\t\tgetTabs() {\n\t\t\t\treturn this.list;\n\t\t\t},\n\t\t\t// 滑块需要移动的距离\n\t\t\tscrollBarLeft() {\n\t\t\t\treturn Number(this.line3Dx) + Number(this.line3AddDx);\n\t\t\t},\n\t\t\t// 滑块的宽度转为px单位\n\t\t\tbarWidthPx() {\n\t\t\t\treturn uni.upx2px(this.barWidth);\n\t\t\t},\n\t\t\t// tab的样式\n\t\t\ttabItemStyle() {\n\t\t\t\treturn (index) => {\n\t\t\t\t\tlet style = {\n\t\t\t\t\t\theight: this.height + 'rpx',\n\t\t\t\t\t\tlineHeight: this.height + 'rpx',\n\t\t\t\t\t\tpadding: `0 ${this.gutter / 2}rpx`,\n\t\t\t\t\t\tcolor: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,\n\t\t\t\t\t\tfontSize: this.fontSize + 'rpx',\n\t\t\t\t\t\tzIndex: this.zIndex + 2,\n\t\t\t\t\t\tfontWeight: (index == this.getCurrent && this.bold) ? 'bold' : 'normal'\n\t\t\t\t\t};\n\t\t\t\t\tif(index == this.getCurrent) {\n\t\t\t\t\t\t// 给选中的tab item添加外部自定义的样式\n\t\t\t\t\t\tstyle = Object.assign(style, this.activeItemStyle);\n\t\t\t\t\t}\n\t\t\t\t\treturn style;\n\t\t\t\t}\n\t\t\t},\n\t\t\t// 底部滑块的样式\n\t\t\ttabBarStyle() {\n\t\t\t\tlet style = {\n\t\t\t\t\twidth: this.barWidthPx + 'px',\n\t\t\t\t\theight: this.barHeight + 'rpx',\n\t\t\t\t\tborderRadius: '100px',\n\t\t\t\t\tbackgroundColor: this.activeColor,\n\t\t\t\t\tleft: this.scrollBarLeft + 'px'\n\t\t\t\t};\n\t\t\t\treturn Object.assign(style, this.barStyle);\n\t\t\t}\n\t\t},\n\t\twatch: {\n\t\t\tcurrent(n, o) {\n\t\t\t\tthis.change(n);\n\t\t\t\tthis.setFinishCurrent(n);\n\t\t\t},\n\t\t\tlist() {\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.init();\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\tmounted() {\n\t\t\tthis.init();\n\t\t},\n\t\tmethods: {\n\t\t\tasync init() {\n\t\t\t\tthis.countPx();\n\t\t\t\tawait this.getTabsInfo();\n\t\t\t\tthis.countLine3Dx();\n\t\t\t\tthis.getQuery(() => {\n\t\t\t\t\tthis.setScrollViewToCenter();\n\t\t\t\t});\n\t\t\t\t// 颜色渐变过程数组\n\t\t\t\tthis.colorGradientArr = color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep);\n\t\t\t},\n\t\t\t// 获取各个tab的节点信息\n\t\t\tgetTabsInfo() {\n\t\t\t\treturn new Promise((resolve, reject) => {\n\t\t\t\t\tlet view = uni.createSelectorQuery().in(this);\n\t\t\t\t\tfor (let i = 0; i < this.list.length; i++) {\n\t\t\t\t\t\tview.select('.' + preId + i).boundingClientRect();\n\t\t\t\t\t}\n\t\t\t\t\tview.exec(res => {\n\t\t\t\t\t\tconst arr = [];\n\t\t\t\t\t\tfor (let i = 0; i < res.length; i++) {\n\t\t\t\t\t\t\t// 给每个tab添加其文字颜色属性\n\t\t\t\t\t\t\tres[i].color = this.inactiveColor;\n\t\t\t\t\t\t\t// 当前tab直接赋予activeColor\n\t\t\t\t\t\t\tif (i == this.getCurrent) res[i].color = this.activeColor;\n\t\t\t\t\t\t\tarr.push(res[i]);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.tabsInfo = arr;\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t},\n\t\t\t// 当swiper滑动结束，计算滑块最终要停留的位置\n\t\t\tcountLine3Dx() {\n\t\t\t\tconst tab = this.tabsInfo[this.animationFinishCurrent];\n\t\t\t\t// 让滑块中心点和当前tab中心重合\n\t\t\t\tif (tab) this.line3Dx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left;\n\t\t\t},\n\t\t\tcountPx() {\n\t\t\t\t// swiper宽度由rpx转为px单位，因为dx等，都是px单位\n\t\t\t\tthis.sW = uni.upx2px(Number(this.swiperWidth));\n\t\t\t},\n\t\t\temit(index) {\n\t\t\t\tthis.$emit('change', index);\n\t\t\t},\n\t\t\tchange() {\n\t\t\t\tthis.setScrollViewToCenter();\n\t\t\t},\n\t\t\tgetQuery(cb) {\n\t\t\t\ttry {\n\t\t\t\t\tlet view = uni.createSelectorQuery().in(this).select('.u-tabs');\n\t\t\t\t\tview.fields({\n\t\t\t\t\t\t\tsize: true\n\t\t\t\t\t\t},\n\t\t\t\t\t\tdata => {\n\t\t\t\t\t\t\tif (data) {\n\t\t\t\t\t\t\t\tthis.componentsWidth = data.width;\n\t\t\t\t\t\t\t\tif (cb && typeof cb === 'function') cb(data);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.getQuery(cb);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t).exec();\n\t\t\t\t} catch (e) {\n\t\t\t\t\tthis.componentsWidth = windowWidth;\n\t\t\t\t}\n\t\t\t},\n\t\t\t// 把活动tab移动到屏幕中心点\n\t\t\tsetScrollViewToCenter() {\n\t\t\t\tlet tab;\n\t\t\t\ttab = this.tabsInfo[this.animationFinishCurrent];\n\t\t\t\tif (tab) {\n\t\t\t\t\tlet tabCenter = tab.left + tab.width / 2;\n\t\t\t\t\tlet fatherWidth;\n\t\t\t\t\t// 活动tab移动到中心时，以屏幕还是tab组件为宽度为基准\n\t\t\t\t\tif (this.autoCenterMode === 'window') {\n\t\t\t\t\t\tfatherWidth = windowWidth;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tfatherWidth = this.componentsWidth;\n\t\t\t\t\t}\n\t\t\t\t\tthis.scrollLeft = tabCenter - fatherWidth / 2;\n\t\t\t\t}\n\t\t\t},\n\t\t\tsetDx(dx) {\n\t\t\t\tlet nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1;\n\t\t\t\t// 判断索引是否超出边界\n\t\t\t\tnextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex;\n\t\t\t\tnextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex;\n\t\t\t\tconst tab = this.tabsInfo[nextTabIndex];\n\t\t\t\t// 当前tab中心点x轴坐标\n\t\t\t\tlet nowTab = this.tabsInfo[this.animationFinishCurrent];\n\t\t\t\tlet nowTabX = nowTab.left + nowTab.width / 2;\n\t\t\t\t// 下一个tab\n\t\t\t\tlet nextTab = this.tabsInfo[nextTabIndex];\n\t\t\t\tlet nextTabX = nextTab.left + nextTab.width / 2;\n\t\t\t\t// 两个tab之间的距离，因为下一个tab可能在当前tab的左边或者右边，取绝对值即可\n\t\t\t\tlet distanceX = Math.abs(nextTabX - nowTabX);\n\t\t\t\tthis.line3AddDx = (dx / this.sW) * distanceX;\n\t\t\t\tthis.setTabColor(this.animationFinishCurrent, nextTabIndex, dx);\n\t\t\t},\n\t\t\t// 设置tab的颜色\n\t\t\tsetTabColor(nowTabIndex, nextTabIndex, dx) {\n\t\t\t\tlet colorIndex = Math.abs(Math.ceil((dx / this.sW) * 100));\n\t\t\t\tlet colorLength = this.colorGradientArr.length;\n\t\t\t\t// 处理超出索引边界的情况\n\t\t\t\tcolorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex;\n\t\t\t\t// 设置下一个tab的颜色\n\t\t\t\tthis.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex];\n\t\t\t\t// 设置当前tab的颜色\n\t\t\t\tthis.tabsInfo[nowTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex];\n\t\t\t},\n\t\t\t// swiper结束滑动\n\t\t\tsetFinishCurrent(current) {\n\t\t\t\t// 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况\n\t\t\t\tthis.tabsInfo.map((val, index) => {\n\t\t\t\t\tif (current == index) val.color = this.activeColor;\n\t\t\t\t\telse val.color = this.inactiveColor;\n\t\t\t\t\treturn val;\n\t\t\t\t});\n\t\t\t\tthis.line3AddDx = 0;\n\t\t\t\tthis.animationFinishCurrent = current;\n\t\t\t\tthis.countLine3Dx();\n\t\t\t}\n\t\t}\n\t};\n</script>\n\n<style scoped lang=\"scss\">\n\t@import \"../../libs/css/style.components.scss\";\n\n\tview,\n\tscroll-view {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.u-tabs {\n\t\twidth: 100%;\n\t\ttransition-property: background-color, color;\n\t}\n\n\t/* #ifndef APP-NVUE */\n\t::-webkit-scrollbar,\n\t::-webkit-scrollbar,\n\t::-webkit-scrollbar {\n\t\tdisplay: none;\n\t\twidth: 0 !important;\n\t\theight: 0 !important;\n\t\t-webkit-appearance: none;\n\t\tbackground: transparent;\n\t}\n\t/* #endif */\n\n\t/* #ifdef H5 */\n\t// 通过样式穿透，隐藏H5下，scroll-view下的滚动条\n\tscroll-view ::v-deep ::-webkit-scrollbar {\n\t\tdisplay: none;\n\t\twidth: 0 !important;\n\t\theight: 0 !important;\n\t\t-webkit-appearance: none;\n\t\tbackground: transparent;\n\t}\n\n\t/* #endif */\n\n\t.u-scroll-view {\n\t\twidth: 100%;\n\t\twhite-space: nowrap;\n\t\tposition: relative;\n\t}\n\n\t.u-tabs-scroll-box {\n\t\tposition: relative;\n\t}\n\n\t.u-tabs-scorll-flex {\n\t\t@include vue-flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.u-tabs-scorll-flex .u-tabs-item {\n\t\tflex: 1;\n\t}\n\n\t.u-tabs-item {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\ttext-align: center;\n\t\ttransition-property: background-color, color, font-weight;\n\t}\n\n\t.content {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.boxStyle {\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\ttransition-property: all;\n\t}\n\n\t.boxStyle2 {\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\ttransition-property: all;\n\t\ttransform: translateY(-100%);\n\t}\n\n\t.itemBackgroundBox {\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\ttransition-property: left, background-color;\n\t\t@include vue-flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.itemBackground {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\ttransition-property: all;\n\t}\n\n\t.u-scroll-bar {\n\t\tposition: absolute;\n\t\tbottom: 4rpx;\n\t}\n</style>\n","import mod from \"-!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../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 \"-!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../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 // 1729934667760\n var cssReload = require(\"D:/uni-app/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":""} |