Vue plug-in tab tab use summary _javascript tips

This example for you to share the Vue plug-in tab tab of the use of the method for your reference, the specific content as follows

Basic usage

 <template> <tab:options= "tabopt": state.sync= "Stateindex" ></tab
 > </template> <script type= "Text/babel" > Import tab from ' Components/tab_touch '; Export default {data () {tabopt:undefined, stateindex:0}, components:{"tab": Tab}, Ready () {This.ta bopt={count:2.3, Pin:true, htmls:["<span> daytime mountaineering </span>", "<span> Beacon </span>" , "<span> dusk to the horses </span>", "<span> pong Jiaohe </span>", "<span> pedestrian Shandou </span>", "& lt;span> Sandstorm </span> "," <span> Princess Pipa </span> "," <span> bitterness More </span> "," <span> Camping miles </span> "," <span> Hucheng Guo </span> "," <span> rain and snow in the </span> "," <span> even desert </
    Span> "], Slidecallback:function (DEX) {Console.log (DEX); }, Tabclassname: "tab", Tabactiveclassname: "Active"}} </script> 

Definition of options parameter

Code

Tab.vue

<template> <div class= "Fixwrap" > <div class= "component-tabswrap": id= "Tabswrapid" "v-touch:pan=" OnPa n "> <div class=" component-tabs ": style=" Wrapstyle "> <div class=" component-tab "v-for=" item in Options.h Tmls "track-by=" $index ": style=" ' Width: ' +twidth+ ' px ' "@click. stop=" this.state= $index ": class=" [Options.tabclas Sname, $index ==state?options.tabactiveclassname: '] ' > {{{item}}} </div> </div> </div> & lt;/div> </template> <style lang= "sass" rel= "Stylesheet/sass" > @import "Tab.sass" </style> <
 Script Lang= "Babel" type= "Text/babel" > var Vuetouch = require (' Vue-touch ');
 Vue.use (Vuetouch); Import requestanimframe from ' utils/requestanimframe ' const sign = (num) => {return num >= 0? 1:-1} Export Default {props: [Options, ' state '], data () {return {tabswrapid:undefined,//outer container ID wrapwidth: "",//outer container width Degree twidth:0,//Each tab should have how wide width:0,//WideDegree.
    starttransx:0, transx:0,//element style offset.
   cssx:0//action in the actual offset of the CSS completed.
    }, Methods: {init () {this.wrapwidth = document.getElementById (this.tabswrapid). offsetwidth;
    This.twidth = This.wrapwidth/this.options.count;
    This.width = This.twidth * THIS.OPTIONS.HTMLS.LENGTH;
    settimeout (function () {this. $el. style["Height"]= this. $el. children[0].clientheight+ "px";
     }.bind (this), 0) if (this.options.pin) {var elemrect = this. $el. Getboundingclientrect ();
     var windowoffset = This.getwindowoffset ();
     var winoffsety = windowoffset.offsety;
     This.elemoffsety = Elemrect.top + winoffsety;
    Document.addeventlistener (' scroll ', this.istop);
    }, Onpan (event) {if (This.options.disPan) return;
    THIS.TRANSX = Event.deltax + this.starttransx;
    THIS.CSSX = THIS.TRANSX; if (Event.eventtype = = 4) {this.transx =-math.round (-this.transx/this.twidth) * this.twidth;//full grid sliding var sta
     RT = NULL; if (This.traNsX > 0) {//head bounce THIS.TRANSX = 0;
      var speed = 24;
      Requestanimframe (Step.bind (this));
       function Step (timestamp) {THIS.CSSX-= speed;
       if (This.cssx > This.transx) requestanimframe (Step.bind (this));
      else This.starttransx = THIS.CSSX = THIS.TRANSX;
     }; else if (This.transx < this.wrapwidth-this.width) {//tail bounce THIS.TRANSX = This.wrapwidth-this.wi
      Dth
      var speed = 24;
      Requestanimframe (Step.bind (this));
       function Step (timestamp) {THIS.CSSX + = speed;
       if (THIS.CSSX < THIS.TRANSX) Requestanimframe (Step.bind (this));
      else This.starttransx = THIS.CSSX = THIS.TRANSX;
     };
      else {//whole grid drop-bit let speed = 6;
      Let _sign = sign (THIS.CSSX-THIS.TRANSX);
      if (_sign * (THIS.CSSX-THIS.TRANSX) > 1) requestanimframe (Step.bind (this));
      else THIS.CSSX = THIS.TRANSX; function Step (timestamp) {if (start = = =NULL) start = timestamp;
       Let progress = Timestamp-start;
       if (Progress < 3000) speed *= 1-progress/3000;
       THIS.CSSX-= _sign * SPEED;
       if (_sign * (THIS.CSSX-THIS.TRANSX) > 1) requestanimframe (Step.bind (this));
      else THIS.CSSX = THIS.TRANSX;
     }; } THIS.STARTTRANSX = THIS.TRANSX;
    Sliding end sets the starting value for the next slide.
    }, Slideto (dex) {this.state = dex;
    Let speed = 10;
     The first few if (dex + 1 <= this.options.count) {this.transx = 0;//set to the location.
      if (This.starttransx < THIS.TRANSX) {Let _sign = sign (THIS.TRANSX-THIS.STARTTRANSX);
      THIS.CSSX = this.transx-_sign * this.twidth;
      Requestanimframe (Step.bind (this));
       function Step () {THIS.CSSX + = _sign * SPEED;
       if (_sign * (THIS.CSSX-THIS.TRANSX) < 0) Requestanimframe (step.bind (this));
        else {this.cssx = THIS.STARTTRANSX = THIS.TRANSX; if (this.options.slideCallback) This.options.slideCallbacK (DEX);
      }
       ;
     };
      }//No animation else {this.cssx = THIS.STARTTRANSX = THIS.TRANSX;
     if (this.options.slideCallback) This.options.slideCallback (DEX); }///end several else if (This.options.htmls.length-dex <= this.options.count) {this.transx = THIS.WRAPW
     idth-this.width;//settings should be to the location.
      if (This.starttransx > This.transx) {Let _sign = sign (THIS.TRANSX-THIS.STARTTRANSX);
      THIS.CSSX = this.transx-_sign * this.twidth;
      Requestanimframe (Step.bind (this));
       function Step () {THIS.CSSX + = _sign * SPEED;
       if (_sign * (THIS.CSSX-THIS.TRANSX) < 0) Requestanimframe (step.bind (this));
        else {this.cssx = THIS.STARTTRANSX = THIS.TRANSX;
       if (typeof this.options.slideCallback = = "function") This.options.slideCallback (DEX);
     }

      }; else {this.cssx = THIS.STARTTRANSX = THIS.TRANSX;//No animation if (typeof this.options.slideCallback = "FuNction ") This.options.slideCallback (DEX);
     The else {this.transx =-this.twidth * dex;//setting should be to the location.
     Let _sign = sign (THIS.TRANSX-THIS.STARTTRANSX); if (This.twidth * (dex + 0.5 * (1-_sign)) + this.starttransx >= 0 && this.twidth * (dex + 0.5 * (1-_sign))
      + THIS.STARTTRANSX <= this.wrapwidth) {//No animation THIS.CSSX = THIS.TRANSX = THIS.STARTTRANSX;
     if (typeof this.options.slideCallback = = "function") This.options.slideCallback (DEX);
      else {//need animation THIS.CSSX = this.transx-_sign * this.twidth;
      Requestanimframe (Step.bind (this));
       function Step () {THIS.CSSX + = _sign * SPEED;
       if (_sign * (THIS.CSSX-THIS.TRANSX) < 0) Requestanimframe (step.bind (this));
        else {this.cssx = THIS.STARTTRANSX = THIS.TRANSX;
       if (typeof this.options.slideCallback = = "function") This.options.slideCallback (DEX);
     }
      }; }}, Istop () {VAR windowoffset = This.getwindowoffset (), winoffsety = Windowoffset.offsety, istop;
    Istop = This.elemoffsety <= winoffsety;
     if (istop) {this. $el. children[0].style[' position '] = ' fixed ';
     this. $el. children[0].style[' top '] = ' 0 ';
    this. $el. children[0].style[' left '] = ' 0 ';
    } else {this. $el. children[0].style[' position ']= ' relative ';
   return istop;
    }, Getwindowoffset () {var t;
    var win = window; var pagexoffset = (typeof Win.pagexoffset = ' number ')? Win.pagexoffset: ((t = doc.documentelement) | | (t = body.parentnode)) && typeof T.scrollleft = = ' number '? T:body).
    ScrollLeft; var pageyoffset = (typeof Win.pageyoffset = ' number ')? Win.pageyoffset: ((t = doc.documentelement) | | (t = body.parentnode)) && typeof t.scrolltop = = ' number '? T:body).
    scrolltop;
   return {offsetx:pagexoffset, offsety:pageyoffset}; },}, watch: {options () {this.tabswrapid = parseInt (Math.random () * 1e10);
   SetTimeout (This.init.bind (this), 10);
    }, State (val) {This.slideto (val)}}, computed: {Wrapstyle () {var _str = "";
    if (this.width) _str + = ' width:${this.width}px ';//width _str + = '-webkit-transform:translatex (${this.cssx}px); '//displacement.
    _str + = ' Transform:translatex (${this.cssx}px); '/displacement. 
 Return _STR}} </script> <style lang= "sass" rel= "Stylesheet/sass" type= "sass" >. Fixwrap z-index:999 Position:relative. Component-tabswrap width:100% overflow:hidden min-height:. 1rem position:relative Background : #fff. Component-tabs height:100% display:table. Component-tab Display:table-cell Box-sizing:border-box Tex

 T-align:center Vertical-align:middle </style>

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.