vue插件tab选项卡使用小结


Posted in Javascript onOctober 27, 2016

本文实例为大家分享了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参数释义

vue插件tab选项卡使用小结

代码

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==state?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
 wrapWidth: "", //外容器宽度
 tWidth: 0, //每一个选项卡应该有多宽
 width: 0, //宽度。
 startTransX: 0,
 transX: 0, //元素样式偏移。
 cssX: 0 //动作中css实际完成的偏移。
 }
 },
 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; //整格滑动
  var start = null;
  if (this.transX > 0) {
  // 头部回弹
  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) {
  // 尾部回弹
  this.transX = this.wrapWidth - this.width;
  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 {
  //整格落位
  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; //滑动结束设置下次滑动起始值。
 }

 },
 slideTo(dex){
 this.state = dex;
 let speed = 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;`;//宽度
 _str += `-webkit-transform:translateX(${this.cssX}px);` //位移。
 _str += `transform:translateX(${this.cssX}px);` //位移。
 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>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
小程序实现发表评论功能
Jul 06 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 #Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 #Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 #Javascript
微信小程序  modal弹框组件详解
Oct 27 #Javascript
从0开始学Vue
Oct 27 #Javascript
微信小程序  Mustache语法详细介绍
Oct 27 #Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
Python中常用的内置方法
2019/01/28 Python
Python文件读写常见用法总结
2019/02/22 Python
python计算二维矩形IOU实例
2020/01/18 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
python初步实现word2vec操作
2020/06/09 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
cf战队宣传语
2015/07/13 职场文书
运动会开幕式致辞
2015/07/29 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL