UNPKG

eeeeeeuuuu-ui

Version:

uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

12 lines (11 loc) • 5.25 kB
1
2
3
4
5
6
7
8
9
10
11
12
require('../../../app.js'); (global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["uview-ui/components/u-tabs-swiper/u-tabs-swiper"],{"1f1d":function(t,e,i){},5442:function(t,e,i){"use strict";var r;i.r(e);var n,s=function(){var t=this,e=t.$createElement,i=(t._self._c,t.__map(t.getTabs,(function(e,i){var r=t.__get_orig(e),n=t.__get_style([t.tabItemStyle(i)]);return{$orig:r,s0:n}}))),r=t.showBar?t.__get_style([t.tabBarStyle]):null;t.$mp.data=Object.assign({},{$root:{l0:i,s1:r}})},o=[],a=i("e394"),h=a["a"],l=(i("bb15"),i("f0c5")),u=Object(l["a"])(h,s,o,!1,null,"7c83e275",null,!1,r,n);e["default"]=u.exports},bb15:function(t,e,i){"use strict";var r=i("1f1d"),n=i.n(r);n.a},e394:function(t,e,i){"use strict";(function(t){var r=i("3558");let n=r["a"];const{windowWidth:s}=t.getSystemInfoSync(),o="UEl_";e["a"]={name:"u-tabs-swiper",props:{isScroll:{type:Boolean,default:!0},list:{type:Array,default(){return[]}},current:{type:[Number,String],default:0},height:{type:[Number,String],default:80},fontSize:{type:[Number,String],default:30},swiperWidth:{type:[String,Number],default:750},activeColor:{type:String,default:"#2979ff"},inactiveColor:{type:String,default:"#303133"},barWidth:{type:[Number,String],default:40},barHeight:{type:[Number,String],default:6},gutter:{type:[Number,String],default:40},zIndex:{type:[Number,String],default:1},bgColor:{type:String,default:"#ffffff"},autoCenterMode:{type:String,default:"window"},name:{type:String,default:"name"},bold:{type:Boolean,default:!0},activeItemStyle:{type:Object,default(){return{}}},showBar:{type:Boolean,default:!0},barStyle:{type:Object,default(){return{}}}},data(){return{scrollLeft:0,tabQueryInfo:[],windowWidth:0,animationFinishCurrent:this.current,componentsWidth:0,line3AddDx:0,line3Dx:0,preId:o,sW:0,tabsInfo:[],colorGradientArr:[],colorStep:100}},computed:{getCurrent(){const t=Number(this.current);return t>this.getTabs.length-1?this.getTabs.length-1:t<0?0:t},getTabs(){return this.list},scrollBarLeft(){return Number(this.line3Dx)+Number(this.line3AddDx)},barWidthPx(){return t.upx2px(this.barWidth)},tabItemStyle(){return t=>{let e={height:this.height+"rpx",lineHeight:this.height+"rpx",padding:`0 ${this.gutter/2}rpx`,color:this.tabsInfo.length>0?this.tabsInfo[t]?this.tabsInfo[t].color:this.activeColor:this.inactiveColor,fontSize:this.fontSize+"rpx",zIndex:this.zIndex+2,fontWeight:t==this.getCurrent&&this.bold?"bold":"normal"};return t==this.getCurrent&&(e=Object.assign(e,this.activeItemStyle)),e}},tabBarStyle(){let t={width:this.barWidthPx+"px",height:this.barHeight+"rpx",borderRadius:"100px",backgroundColor:this.activeColor,left:this.scrollBarLeft+"px"};return Object.assign(t,this.barStyle)}},watch:{current(t,e){this.change(t),this.setFinishCurrent(t)},list(){this.$nextTick(()=>{this.init()})}},mounted(){this.init()},methods:{async init(){this.countPx(),await this.getTabsInfo(),this.countLine3Dx(),this.getQuery(()=>{this.setScrollViewToCenter()}),this.colorGradientArr=n.colorGradient(this.inactiveColor,this.activeColor,this.colorStep)},getTabsInfo(){return new Promise((e,i)=>{let r=t.createSelectorQuery().in(this);for(let t=0;t<this.list.length;t++)r.select("."+o+t).boundingClientRect();r.exec(t=>{const i=[];for(let e=0;e<t.length;e++)t[e].color=this.inactiveColor,e==this.getCurrent&&(t[e].color=this.activeColor),i.push(t[e]);this.tabsInfo=i,e()})})},countLine3Dx(){const t=this.tabsInfo[this.animationFinishCurrent];t&&(this.line3Dx=t.left+t.width/2-this.barWidthPx/2-this.tabsInfo[0].left)},countPx(){this.sW=t.upx2px(Number(this.swiperWidth))},emit(t){this.$emit("change",t)},change(){this.setScrollViewToCenter()},getQuery(e){try{let i=t.createSelectorQuery().in(this).select(".u-tabs");i.fields({size:!0},t=>{t?(this.componentsWidth=t.width,e&&"function"===typeof e&&e(t)):this.getQuery(e)}).exec()}catch(i){this.componentsWidth=s}},setScrollViewToCenter(){let t;if(t=this.tabsInfo[this.animationFinishCurrent],t){let e,i=t.left+t.width/2;e="window"===this.autoCenterMode?s:this.componentsWidth,this.scrollLeft=i-e/2}},setDx(t){let e=t>0?this.animationFinishCurrent+1:this.animationFinishCurrent-1;e=e<=0?0:e,e=e>=this.list.length?this.list.length-1:e;this.tabsInfo[e];let i=this.tabsInfo[this.animationFinishCurrent],r=i.left+i.width/2,n=this.tabsInfo[e],s=n.left+n.width/2,o=Math.abs(s-r);this.line3AddDx=t/this.sW*o,this.setTabColor(this.animationFinishCurrent,e,t)},setTabColor(t,e,i){let r=Math.abs(Math.ceil(i/this.sW*100)),n=this.colorGradientArr.length;r=r>=n?n-1:r<=0?0:r,this.tabsInfo[e].color=this.colorGradientArr[r],this.tabsInfo[t].color=this.colorGradientArr[n-1-r]},setFinishCurrent(t){this.tabsInfo.map((e,i)=>(e.color=t==i?this.activeColor:this.inactiveColor,e)),this.line3AddDx=0,this.animationFinishCurrent=t,this.countLine3Dx()}}}}).call(this,i("543d")["default"])}}]); ;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([ 'uview-ui/components/u-tabs-swiper/u-tabs-swiper-create-component', { 'uview-ui/components/u-tabs-swiper/u-tabs-swiper-create-component':(function(module, exports, __webpack_require__){ __webpack_require__('543d')['createComponent'](__webpack_require__("5442")) }) }, [['uview-ui/components/u-tabs-swiper/u-tabs-swiper-create-component']] ]);