vue實現頁面的全屏展示以及頁面資料的無限滾動
阿新 • • 發佈：2021-12-19
vue使用screenfull進入全屏
1.安裝依賴
npm install --save screenfull
2.在需要設定的頁面匯入
import screenfull from "screenfull";
3.Js程式碼
//全屏方法 isScreenFull() { // 需要注意的是 如果判斷!screenfull.enabled 顯示的是不支援全屏的話 是因為谷歌的版本問題 判斷改為 !screenfull.isEnabled 就可以了 if (!screenfull.enabled) { // 如果不支援進入全屏，發出不支援提示 this.$message({ message: "您的瀏覽器版本過低不支援全屏顯示！", type: "warning", }); return false; } screenfull.toggle(); },
原文：https://www.jianshu.com/p/3f0ec927c2ca
vue使用vue-seamless-scroll 實現頁面的無縫滾動
1.安裝依賴
cnpm install vue-seamless-scroll -s
2.引入（可以在所需頁面引入，也可全域性引入）
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
Vue.use(scroll,{componentName: 'scroll-seamless'})
3.使用元件
<div class="mainBox"> <vue-seamless-scroll :data="listData" :class-option="optionSingleHeightTime" class="seamless-warp"> <ul class="item"> <li v-for="item in listData"> <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span> </li> </ul> </vue-seamless-scroll> </div>
4.Js程式碼
computed: { optionSingleHeightTime() { return { step: 0.2, // 數值越大速度滾動越快 limitMoveNum: this.limitMoveNum, // 開始無縫滾動的資料量 this.dataList.length hoverStop: false, // 是否開啟滑鼠懸停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 開啟資料實時監控重新整理dom singleHeight: 50, // 單步運動停止的高度(預設值0是無縫不停止的滾動) direction => 0/1 singleWidth: 0, // 單步運動停止的寬度(預設值0是無縫不停止的滾動) direction => 2/3 waitTime: 1200, // 單步運動停止的時間(預設值1000ms) }; }, },
原文：
https://cloud.tencent.com/developer/article/1494450 https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
我的demo
<template>
<div class="woIssueLineScreen">
<el-row :gutter="10" style="z-index: 100; margin-bottom: 0px">
<el-col>
<div class="grid-content bg-purple-light">
<table class="woIssueLineTable" cellspacing="0" id="titleTable">
<tr>
<td colspan="9" id="title">物料發放進度</td>
</tr>
<tr id="tableTitle">
<td style="width: 10%">生產單號/工程ID</td>
<td style="width: 10%">產品編碼</td>
<td style="width: 10%">產品名稱</td>
<td style="width: 10%">優先順序</td>
<td style="width: 10%">物料名稱</td>
<td style="width: 10%">物料編碼</td>
<td style="width: 10%">總需求量</td>
<td style="width: 10%">待發數量</td>
<td style="width: 20%">進度</td>
</tr>
</table>
</div>
</el-col>
</el-row>
<el-row :gutter="10" style="z-index: 1; margin-top: 0px">
<el-col :xl="1"
><div class="grid-content bg-purple">
<vue-seamless-scroll
:data="woIssueLine"
:class-option="optionSingleHeightTime"
>
<table class="woIssueLineTable">
<thead
v-for="(item, index) in woIssueLine"
:key="index"
id="woIssueThead"
>
<td style="width: 10%" v-text="item.woId"></td>
<td style="width: 10%" v-text="item.productId"></td>
<td style="width: 10%" v-text="item.productName"></td>
<td style="width: 10%" v-text="item.rpiOrder"></td>
<td style="width: 10%" v-text="item.ptId"></td>
<td style="width: 10%" v-text="item.pname"></td>
<td style="width: 10%" v-text="item.treqQty"></td>
<td style="width: 10%" v-text="item.remQty"></td>
<td style="width: 20%">
<el-progress
:percentage="toChange((item.relQty / item.reqQty) * 100)"
:show-text="true"
>
</el-progress>
</td>
</thead>
</table>
</vue-seamless-scroll></div
></el-col>
</el-row>
</div>
</template>
<script>
import woIssue from "@/api/woIssue";
import screenfull from "screenfull";
export default {
data() {
return {
woIssueLine: [],
timeId: "",
limitMoveNum: 0,//開始無縫滾動的資料量
};
},
created() {
this.getAllWoIssueLine();
this.timeId = this.timer();
this.isScreenFull();
this.init()
},
computed: {
optionSingleHeightTime() {
return {
step: 0.2, // 數值越大速度滾動越快
limitMoveNum: this.limitMoveNum, // 開始無縫滾動的資料量 this.dataList.length
hoverStop: false, // 是否開啟滑鼠懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟資料實時監控重新整理dom
singleHeight: 50, // 單步運動停止的高度(預設值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, // 單步運動停止的寬度(預設值0是無縫不停止的滾動) direction => 2/3
waitTime: 1200, // 單步運動停止的時間(預設值1000ms)
};
},
},
methods: {
//初始化
init(){
//獲取螢幕高度
var screenHeight=window.screen.height;
//計算當前螢幕可以容納多少條資料
console.log((screenHeight-100)/50);
this.limitMoveNum=((screenHeight-100)/50)
},
//獲取當前所有的已發放的發料單
getAllWoIssueLine() {
woIssue
.getAllWoIssueLinefullScreen()
.then((result) => {
console.log(result);
this.woIssueLine = result.data.woIssueLines;
})
.catch((err) => {
this.$message({
type: "error",
message: "查詢失敗，請重試",
});
});
},
timer() {
console.log("執行定時方法");
return setInterval(() => {
this.getAllWoIssueLine();
}, 3000);
},
//四捨五入數字
toChange(num) {
return Math.ceil(num);
},
//全屏方法
isScreenFull() {
// 需要注意的是 如果判斷!screenfull.enabled 顯示的是不支援全屏的話 是因為谷歌的版本問題 判斷改為 !screenfull.isEnabled 就可以了
if (!screenfull.enabled) {
// 如果不支援進入全屏，發出不支援提示
this.$message({
message: "您的瀏覽器版本過低不支援全屏顯示！",
type: "warning",
});
return false;
}
screenfull.toggle();
},
},
mounted() {},
destroyed() {
console.log("執行了銷燬定時的方法");
clearInterval(this.timeId); //退出頁面後銷燬定時方法
},
};
</script>
<style >
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
/* .bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
} */
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.seamless-warp {
height: 229px;
overflow: hidden;
}
.woIssueLineScreen {
height: 100%;
background-color: #053235;
}
.woIssueLineTable {
/* background-color: red; */
width: 100%;
}
#titleTable {
background-color: #1e1d5a;
}
#title {
letter-spacing: 8px;
text-align: center;
font-size: 20px;
}
#tableTitle {
height: 50px;
border: 2px #000080 solid;
color: rgb(255, 254, 254);
font-weight: bold;
font-size: 14px;
text-align: center;
}
.woIssueLineTable td {
height: 50px;
color: #ffffff;
/* line-height: 40px; */
}
#woIssueThead {
text-align: center;
}
</style>