VUE Debug模式在我的这行代码中报告错误:
:style="{transform : 'translate3d(' + translateX + 'px,0, 0)'}"\
在文档中，他们没有解释如何在样式绑定(bind)中绘制变量。
您可以在这里检查我的 vuejs 组件:
Vue.component('vue-tab', {
template: '<template>\
<div class="tab-container">\
<ul class="tab-title-container">\
<li class="tab-title"\
v-for="(title,index) in tabtitles"\
:class="{active: index+1===currentPage}"\
:key="index"\
@click="setPage(index+1)">{{title}}\
</li>\
</ul>\
<!-- decide if bind touchstart -->\
<div v-if="slidable"\
class="tabswiper"\
:class="{invisible:invisible}"\
@touchstart="_onTouchStart">\
<div class="tabswiper-wrap"\
ref="tabswiper-wrap"\
:class="{dragging: dragging}"\
:style="{transform : 'translate3d(' + translateX + 'px,0, 0)'}"\
@transitionend="_onTransitionEnd">\
<slot></slot>\
</div>\
</div>\
<div v-else class="tabswiper"\
:class="{invisible:invisible}">\
<div class="tabswiper-wrap"\
ref="tabswiper-wrap"\
:class="{dragging: dragging}"\
:style="{'transform' : 'translate3d(' + translateX + 'px,0, 0)'}"\
@transitionend="_onTransitionEnd">\
<slot></slot>\
</div>\
</div>\
</div>\
</template>',
props: {
tabtitles: {
type: Array,
default: []
},
curPage: {
type: Number,
default: 1
},
slidable: {
type: Boolean,
default: true
}
},
watch: {
curPage: function (val) {
this.setPage(val)
}
},
data() {
return {
lastPage: 1,
currentPage: this.curPage,
translateX: 0,
startTranslateX: 0,
delta: 0,
deltaY: 0,
dragging: false,
startPos: null,
startPosY: null,
transitioning: false,
slideEls: [],
invisible: true,
judge: JUDGE_INITIAL,
};
},
mounted(){
this.$nextTick(function () {
this._onTouchMove = this._onTouchMove.bind(this);
this._onTouchEnd = this._onTouchEnd.bind(this);
this.slideEls = this.$refs['tabswiper-wrap'].children;
this.dragging = true;
this.setPage(this.currentPage);
let _this = this;
setTimeout(() => {
_this.dragging = _this.invisible = false;
}, 100)
window.onresize=()=>{
_this.setPage(_this.currentPage)
}
})
},
methods: {
next() {
var page = this.currentPage;
if (page < this.slideEls.length) {
page++;
this.setPage(page);
} else {
this._revert();
}
},
prev() {
var page = this.currentPage;
if (page > 1) {
page--;
this.setPage(page);
} else {
this._revert();
}
},
setPage(page) {
this.lastPage = this.currentPage;
this.currentPage = page;
this.translateX = -[].reduce.call(this.slideEls, function (total, el, i) {
//previousValue,currentValue,currentIndex
return i > page - 2 ? total : total + el['clientWidth'];
}, 0);
this._onTransitionStart();
},
_onTouchStart(e) {
this.startPos = this._getTouchPos(e);
this.startYPos = this._getTouchYPos(e);
this.delta = 0;
this.startTranslateX = this.translateX;
this.startTime = new Date().getTime();
this.dragging = true;
document.addEventListener('touchmove', this._onTouchMove, false);
document.addEventListener('touchend', this._onTouchEnd, false);
},
_onTouchMove(e) {
this.delta = this._getTouchPos(e) - this.startPos;
this.deltaY = Math.abs(this._getTouchYPos(e) - this.startYPos);
switch (this.judge) {
case JUDGE_INITIAL:
// if (Math.abs(this.delta) > 20 && this.deltaY<25) {//judge to allow/prevent scroll
if (Math.abs(this.delta) / this.deltaY > 1.5) {//judge to allow/prevent scroll
this.judge = JUDGE_SLIDEING
e.preventDefault();
e.stopPropagation()
} else {
this.judge = JUDGE_SCROLLING
}
break;
case JUDGE_SCROLLING:
break;
case JUDGE_SLIDEING:
e.preventDefault();
e.stopPropagation()
this.translateX = this.startTranslateX + this.delta;
break;
default:
break;
}
},
_onTouchEnd(e) {
this.dragging = false;
if (this.judge == JUDGE_SLIDEING) {
var isQuickAction = new Date().getTime() - this.startTime < 1000;
if (this.delta < -100 || (isQuickAction && this.delta < -15 && this.deltaY / this.delta > -6)) {
this.next();
} else if (this.delta > 100 || (isQuickAction && this.delta > 15 && this.deltaY / this.delta < 6)) {
this.prev();
} else {
this._revert();
}
}
this.judge = JUDGE_INITIAL
document.removeEventListener('touchmove', this._onTouchMove);
document.removeEventListener('touchend', this._onTouchEnd);
},
_revert() {
this.setPage(this.currentPage);
},
_getTouchPos(e) {
var key = 'pageX';
return e.changedTouches ? e.changedTouches[0][key] : e[key];
},
_getTouchYPos(e) {
var key = 'pageY';
return e.changedTouches ? e.changedTouches[0][key] : e[key];
},
_onTransitionStart() {
this.transitioning = true;
if (this._isPageChanged()) {
this.$emit('tab-change-start', this.currentPage);
//FIX:remove the height of the hidden tab-items
[].forEach.call(this.slideEls,(item,index)=>{
if (index== (this.currentPage-1)) {
removeClass(item,'hide-height')
}
else {
addClass(item,'hide-height')
}
})
} else {
this.$emit('tab-revert-start', this.currentPage);
}
},
_onTransitionEnd(e) {
e.stopPropagation()
if (e.target.className != 'tabswiper-wrap') return;
this.transitioning = false;
if (this._isPageChanged()) {
this.$emit('tab-change-end', this.currentPage);
} else {
this.$emit('tab-revert-end', this.currentPage);
}
},
_isPageChanged() {
return this.lastPage !== this.currentPage;
}
}
});
最佳答案
您可以使用计算属性。
computed: {
//however you want to call it
style() {
return {transform : 'translate3d(' + this.translateX + 'px, 0, 0)'}
}
}
要使用它，只需将绑定(bind)更改为 :style="this.style"
关于javascript - Vuejs 语法错误 : Unexpected identifier，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52162827/