vue中設置滾動條方式
vue設置滾動條
vue如何在div中設置滾動條呢？
首先需要寫一下css樣式
<div
:style="{'max-height': this.timeLineHeight + 'px' }"
style="overflow-y:scroll;"
>
</div>
在這個div中，放的是你寫的前端代碼。它是可以滾動的。
在mounted中改變最大高度的大小。這個減210，它減的是我標頭的高度，你的具體高度需要根據實際情況來減。
mounted() {
this.timeLineHeight = document.documentElement.clientHeight - 210;
window.onresize = () => {
this.timeLineHeight = document.documentElement.clientHeight - 210;
};
},
在data中聲明一下屬性
data() {
return {
timeLineHeight: "",
}
}
這樣就可以瞭！
vue控制滾動條
隻要想要在Vue中直接操作DOM元素，就必須用ref屬性進行註冊
<div @click = 'roll(1)'>向左移動</div> <div class='nav' ref="nav"></div> <div @click = 'roll(2)'>向右移動</div>
.nav{
overflow- (x,y) = hidden
/*寬高啥的。。。。。
}
x或y軸做隱藏
roll(index){
if(index==1){
//滾動的數值 或者 +- = 值 或者死的數值 就是相應位置
//還有相應的 scrollTop 方法
this.$refs.nav.scrollLeft += 50
}else{
this.$refs.nav.scrollLeft -= 50
}
}
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。