weex-flymeui
Version:
A Flyme Style UI library based on Weex for Creator.
3 lines (2 loc) • 7.49 kB
JavaScript
// { "framework": "Vue" }
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["npm/weex-flymeui/components/fm-native-tab/index"]=e():t["npm/weex-flymeui/components/fm-native-tab/index"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function i(a){if(e[a])return e[a].exports;var n=e[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,a){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:a})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/",i(i.s=122)}({122:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=i(123);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return function(t){return t&&t.__esModule?t:{default:t}}(a).default}})},123:function(t,e,i){var a,n,o=[];o.push(i(124)),a=i(125);var s=i(126);n=a=a||{},"object"!=typeof a.default&&"function"!=typeof a.default||(Object.keys(a).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),n=a=a.default),"function"==typeof n&&(n=n.options),n.__file="/Users/suen/Documents/develop/project/weex-flymeui/packages/fm-native-tab/index.vue",n.render=s.render,n.staticRenderFns=s.staticRenderFns,n._scopeId="data-v-445a1158",n.style=n.style||{},o.forEach(function(t){for(var e in t)n.style[e]=t[e]}),"function"==typeof __register_static_styles__&&__register_static_styles__(n._scopeId,o),t.exports=a},124:function(t,e){t.exports={"fm-tab-page":{width:"1080"},"tab-title-list":{width:"1080",flexDirection:"row",borderBottomWidth:"2",borderColor:"rgba(0,0,0,0.1)"},"tab-title-wrap":{flexDirection:"row",justifyContent:"space-around",paddingTop:0,paddingRight:"48",paddingBottom:0,paddingLeft:"48"},"title-item":{borderColor:"#198DED",paddingTop:"27",paddingRight:"18",paddingBottom:"27",paddingLeft:"18",marginRight:"42"},"item-title":{fontFamily:"sans-serif-medium",fontWeight:"500",fontSize:"42",lineHeight:"57"},"border-bottom":{position:"absolute",left:0,bottom:0,height:"3",width:"132"},"tab-page-wrap":{width:"1080",overflow:"hidden"},"tab-container":{flex:1,flexDirection:"row",position:"absolute"},"tab-item":{width:"1080"}}},125:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=weex.requireModule("animation"),n=weex.requireModule("dom"),o="Web"===weex.config.env.platform;e.default={name:"FmNativeTab",props:{tabTitles:{type:Array,default:function(){return[]}},panDist:{type:Number,default:200},duration:{type:[Number,String],default:300},tabPageHeight:{type:[String,Number],default:1854},tabStyles:{type:Object,default:function(){return{}}},timingFunction:{type:String,default:"cubic-bezier(0.25, 0.46, 0.45, 0.94)"},selectIndex:{type:Number,default:0}},watch:{selectIndex:function(t){this.loaded&&this.setPage(this.selectIndex,!1)}},computed:{isCreator:function(){return weex.supports&&weex.supports("@component/FmTab")},maxPage:function(){return this.tabTitles.length-1},cTabTitles:function(){var t=this.tabStyles,e={paddingStart:18,paddingEnd:18,minWidth:120,textunSelectColor:t.activeTitleColor||"#99000000",textSelectColor:t.titleColor||"#198DED"};return this.tabTitles.map(function(t){return Object.assign({},e,t)})},cTabStyles:function(){return Object.assign({},{titleColor:"rgba(0, 0, 0, 0.6)",activeTitleColor:"#198DED",height:102,padding:18,fontSize:42,activeBottomColor:"#198DED"},this.tabStyles)}},data:function(){return{loaded:!1,currentPage:0,gesToken:0,isMoving:!1,startTime:0,deltaX:0,translateX:0,startPosX:0,startPosY:0,judge:"INITIAL"}},methods:{next:function(){var t=this.currentPage;t<this.maxPage&&t++,this.setPage(t)},prev:function(){var t=this.currentPage;t>0&&t--,this.setPage(t)},_onTouchStart:function(t){o&&(this.startPosX=this._getTouchXPos(t),this.startPosY=this._getTouchYPos(t),this.deltaX=0,this.startTime=(new Date).getTime())},_onTouchMove:function(t){o&&(this.deltaX=this._getTouchXPos(t)-this.startPosX,this.deltaY=Math.abs(this._getTouchYPos(t)-this.startPosY+1),"INITIAL"===this.judge&&Math.abs(this.deltaX)/this.deltaY>1.73&&(this.judge="SLIDE_ING"))},_onTouchEnd:function(t){o&&("SLIDE_ING"===this.judge&&(this.deltaX<-50?this.next():this.deltaX>50&&this.prev()),this.judge="INITIAL")},setPage:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(!(!0===this.isMoving||this.tabTitles.length<=0)){this.isMoving=!0;var i=this.$refs["fm-tab-title-"+t][0],a=this.$refs["fm-tab-title-"+t][0].$el.clientWidth,o=this.$refs["fm-tab-title-"+t][0].$el.offsetLeft;o>=540?n.scrollToElement(i,{offset:a/2-540,animated:e}):n.scrollToElement(i,{offset:-o,animated:e}),this.currentPage=t,this._animateTransformX(t,e),this.$emit("fmTabPageTabSelected",{page:t})}},nativeTabSlided:function(t){this.$emit("fmTabPageTabSelected",{page:t.position})},_animateTransformX:function(t){var e=this,i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=this.duration,o=this.timingFunction,s=this.$refs["tab-container"],r=1080*t;a.transition(s,{styles:{transform:"translateX("+-r+"px)"},duration:i?n:1e-5,timingFunction:o,delay:0},function(){e.isMoving=!1})},_getTouchXPos:function(t){return t.changedTouches[0].pageX},_getTouchYPos:function(t){return t.changedTouches[0].pageY}},mounted:function(){var t=this;this.isCreator||(this.setPage(this.selectIndex,!1),setTimeout(function(){t.loaded=!0},50))}}},126:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.isCreator?i("FmTab",{style:{height:t.tabPageHeight+"px"},attrs:{container:{viewpagepaddingLeft:0,viewpagepaddingRight:0,viewpagepaddingTop:t.cTabStyles.height+12,viewpagepaddingBottom:0,tabpaddingLeft:48,tabpaddingRight:48,tabpaddingTop:0,tabpaddingBottom:0},tab:t.cTabTitles},on:{tabPosition:t.nativeTabSlided}},t._l(t.tabTitles,function(e,a){return i("div",{key:a,staticClass:["tab-item"],style:{height:t.tabPageHeight-t.cTabStyles.height-12+"px"}},[t._t("tab-item-"+a)],2)})):i("div",{staticClass:["fm-tab-page"],style:{height:t.tabPageHeight+"px",opacity:t.loaded?1:0}},[i("scroller",{ref:"tab-title-list",staticClass:["tab-title-list"],style:{height:t.cTabStyles.height+"px"},attrs:{showScrollbar:!1,scrollDirection:"horizontal"}},[i("div",{ref:"tab-title-wrap",staticClass:["tab-title-wrap"]},t._l(t.tabTitles,function(e,a){return i("div",{key:a,ref:"fm-tab-title-"+a,refInFor:!0,staticClass:["title-item"],style:{borderBottomWidth:t.currentPage===a?"3px":"0px"},on:{click:function(e){t.setPage(a)}}},[i("text",{staticClass:["item-title"],style:{fontSize:t.cTabStyles.fontSize+"px",color:t.currentPage===a?t.cTabStyles.activeTitleColor:t.cTabStyles.titleColor,paddingLeft:t.cTabStyles.padding+"px",paddingRight:t.cTabStyles.padding+"px"}},[t._v(t._s(e.text))])])}))]),i("div",{ref:"tab-page-wrap",staticClass:["tab-page-wrap"],style:{height:t.tabPageHeight-t.cTabStyles.height+"px"},on:{panstart:t._onTouchStart,panmove:t._onTouchMove,panend:t._onTouchEnd}},[i("div",{ref:"tab-container",staticClass:["tab-container"]},t._l(t.tabTitles,function(e,a){return i("div",{key:a,staticClass:["tab-item"],style:{height:t.tabPageHeight-t.cTabStyles.height+"px"}},[t._t("tab-item-"+a)],2)}))])])},staticRenderFns:[]},t.exports.render._withStripped=!0}})});