vue插件tab选项卡使用小结
程序员文章站
2022-07-17 21:24:06
本文实例为大家分享了vue插件tab选项卡的使用方法，供大家参考，具体内容如下
基本用法
本文实例为大家分享了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?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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue开发心得和技巧分享
下一篇： Vue.js表单控件实践