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 相关文章推荐
JavaScript中number转换成string介绍
Dec 31 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue.js,ajax渲染页面的实例
Feb 11 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
JavaScript的console命令使用实例
Dec 03 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP培训要多少钱
2017/06/06 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python端口扫描系统实现方法
2014/11/19 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python匹配中文的正则表达式
2016/05/11 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
关于python 跨域处理方式详解
2020/03/28 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
《圆明园的毁灭》教学反思
2014/02/28 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
长城导游词400字
2015/01/30 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL