Resumen del uso del componente tab de la extensión Vue

本文实例为大家分享了vue插件tab选项卡的使用方法，供大家参考，具体内容如下

基本用法

<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.tabOpt={
 count: 2.3,
 pin:true,
 htmls:[
  "<span>白日登山</span>",
  "<span>望烽火</span>",
  "<span>黄昏饮马</span>",
  "<span>傍交河</span>",
  "<span>行人刁斗</span>",
  "<span>风沙暗</span>",
  "<span>公主琵琶</span>",
  "<span>幽怨多</span>",
  "<span>野营万里</span>",
  "<span>无城郭</span>",
  "<span>雨雪纷纷</span>",
  "<span>连大漠</span>"
 ],
 slideCallback:function (dex) {
 console.log(dex);
 },
 tabClassName:"tab",
 tabActiveClassName: "active"
 }
 }
 }
</script>

options参数释义

代码

tab.vue

<template>
 <div class="fixWrap">
 <div class="component-tabsWrap" :id="tabsWrapID"
 v-touch:pan="onPan">
 <div class="component-tabs" :style="wrapStyle">
 <div class="component-tab" v-for="item in options.htmls" track-by="$index" :style="'width:'+tWidth+"px""
  @click.stop="this.state=$index"
  :class="[options.tabClassName,$index==state63;options.tabActiveClassName:'']">
  {{{item}}}
 </div>
 </div>
 </div>
 </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,//ID del contenedor externo
 wrapWidth: "", //Ancho del contenedor externo
 tWidth: 0, //Cada pestaña debe tener cuánto ancho
 width: 0, //Ancho.
 startTransX: 0,
 transX: 0, //Desviación del estilo del elemento.
 cssX: 0 //La desviación real del CSS completada en el proceso.
 }
 },
 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; //Deslizamiento entero
  var start = null;
  if (this.transX > 0) {
  // Rebote al principio
  this.transX = 0;
  var velocidad = 24;
  requestAnimFrame (step.bind (this));
  function step (timestamp) {
  this.cssX -= velocidad;
  if (this.cssX > this.transX) requestAnimFrame (step.bind (this));
  else this.startTransX = this.cssX = this.transX;
  };
  }
  else if (this.transX < this.wrapWidth - this.width) {
  // Rebote al final
  this.transX = this.wrapWidth - this.width;
  var velocidad = 24;
  requestAnimFrame (step.bind (this));
  function step (timestamp) {
  this.cssX += velocidad;
  if (this.cssX < this.transX) requestAnimFrame (step.bind (this));
  else this.startTransX = this.cssX = this.transX;
  };
  }
  else {
  //Ajuste de posición entera
  let velocidad = 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) velocidad *= 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; //Establecer el valor de inicio del deslizamiento para la próxima vez al finalizar el deslizamiento.
 }
 },
 slideTo(dex){
 this.state = dex;
 let velocidad = 10;
 // 开头几个
 if (dex + 1 <= this.options.count) {
  this.transX = 0; // 设置应到位置。
  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);
  }
  ;
  };
  }
  //无需动画
  else {
  this.cssX = this.startTransX = this.transX;
  if (this.options.slideCallback) this.options.slideCallback (dex);
  }
 }
 // 结尾几个
 else if (this.options.htmls.length - dex <= this.options.count) {
  this.transX = this.wrapWidth - this.width;// 设置应到位置。
  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; //无需动画
  if (typeof this.options.slideCallback == "function") this.options.slideCallback (dex);
  }
 }
 //中
 else {
  this.transX = -this.tWidth * dex;// 设置应到位置。
  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) {
  //无需动画
  this.cssX = this.transX = this.startTransX;
  if (typeof this.options.slideCallback == "function") this.options.slideCallback (dex);
  }
  else {
  //需要动画
  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;`;//ancho
 _str += `-webkit-transform:translateX(${this.cssX}px);` //desplazamiento.
 _str += `transform:translateX(${this.cssX}px);` //desplazamiento.
 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
 text-align: center
 vertical-align: middle
</style>

Este artículo ha sido organizado en el tutorial de aprendizaje de componentes front-end de Vue.js, bienvenidos a leer y aprender.

Si还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

Esto es todo el contenido de este artículo, esperamos que sea útil para su aprendizaje y que apoyen más a la serie de tutoriales de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, y pertenece a los propietarios originales. El contenido ha sido proporcionado por usuarios de Internet de manera autónoma y subido por ellos mismos. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar, y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)