tab vue 竖排_vue 插件tab选项卡(转载)

{ { {item}}}

var VueTouch = require ('vue-touch');

Vue.use (VueTouch);

import requestAnimFrame from"utils/requestAnimFrame"const sign= (num)=>{return num >= 0 ? 1 : -1}

exportdefault{

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 = eve