本文实例为大家分享了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==state"> {{{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 "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') ""; 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选项卡操作方法汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- Mozart--ArthurGrumiaux(2024)[24BT]WAV
- 国风大师纯音系列《付娜广粤古筝》1CD[MP3][364.4MB]
- 国风大师纯音系列《罗晶-古筝情缘》1CD[MP3][75.1MB]
- 国风大师纯音系列《民乐琴王童丽-与古筝的约会》1CD[MP3][166.4MB]
- 刘美君.1993-被你纵坏【SONY】【WAV+CUE】
- 黄鹤翔.1998-爱的咏叹调【中唱】【WAV+CUE】
- 薰妮.1983-梦+淡(2000年永恒真存双碟版)【永恒】【WAV+CUE】
- 方伊琪.1976-时光消逝(2015复黑限量版)【风行】【WAV+CUE】
- 群星.1990-宝丽金影视金曲巡礼【宝丽金】【WAV+CUE】
- 林俊杰.2014-新地球(精装预售“光”版)【华纳】【WAV+CUE】
- 国风大师纯音系列《王珣学院派独特的空灵古筝》1CD[FLAC][888MB]
- 国风大师纯音系列《古筝演奏家 付娜》1CD[FLAC][1.2GB]
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]