vue实现页面的全屏展示以及页面数据的无限滚动

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>