❌

阅读视图

发现新文章，点击刷新页面。

h5中弹框出现后禁止页面滚动

✇掘金 前端
小明记账簿_微信小程序

项目场景：

在写带有遮罩层的弹窗时，弹窗出现时，弹框后面的页面依然会保持滚动状态，其实这种情况并么什么影响，但是有很多时候想禁止滚动。无论在移动端还是PC端都会遇到这种情况。

在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期

看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动

思路分析：

查看了很多方案，大多都是采用当弹框出现时，设置body的overflow为hidden，但是由于滚动条的出现和消失，会带动页面跟着跳动，这是不愿看到的结果。

深追下去，我们会发现，默认样式下，页面滚动条的父元素是html，而fixed的父元素是body。

第一种解决方法：在线运行

html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: auto;
}

完整代码：

<template>
  <div class="no-scroll">
    <div class="bg-container">
      <img
        src="https://img-blog.csdnimg.cn/5a87670618fe4cc59d938f77d41cb816.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/2de8a9c47e054f7ba7bd959ea5041130.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/1f4a4d8d488c46f8acad53892fed08e6.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/7b6c25d2f32645f986a26648ef0b0001.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/fbc54f7c6e2a41889d3221e1d3223127.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/d6316c5661344816bbd664a1510f9978.jpeg"
        alt=""
      />
    </div>
    <el-button class="open-btn" type="primary" round @click="open">
      打开弹框
    </el-button>
    <div class="mask-container" v-show="showMask">
      <div class="container">
        <el-button type="primary" round @click="close"> 关闭弹框 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoScroll",
  data() {
    return {
      showMask: false,
    };
  },
  methods: {
    open() {
      this.showMask = true;
    },
    close() {
      this.showMask = false;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  width: 100%;
  height: 100%;
  overflow: auto;
}
img {
  width: 100%;
}
.open-btn {
  position: fixed;
  right: 100px;
  bottom: 100px;
}
.mask-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  background: #fff;
  border-radius: 10px;
}
</style>

如果整个架构都已经固定，担心改html、body会影响原始页面，还有另一种方案。只需要使后面滚动的容器添加一个高度就行，不让body出现滚动，通常设置为屏幕高度。 

第二种解决方法：在线运行

.bg-container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

完整代码：

<template>
  <div class="no-scroll">
    <div class="bg-container">
      <img
        src="https://img-blog.csdnimg.cn/5a87670618fe4cc59d938f77d41cb816.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/2de8a9c47e054f7ba7bd959ea5041130.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/1f4a4d8d488c46f8acad53892fed08e6.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/7b6c25d2f32645f986a26648ef0b0001.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/fbc54f7c6e2a41889d3221e1d3223127.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/d6316c5661344816bbd664a1510f9978.jpeg"
        alt=""
      />
    </div>
    <el-button class="open-btn" type="primary" round @click="open">
      打开弹框
    </el-button>
    <div class="mask-container" v-show="showMask">
      <div class="container">
        <el-button type="primary" round @click="close"> 关闭弹框 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoScroll",
  data() {
    return {
      showMask: false,
    };
  },
  methods: {
    open() {
      this.showMask = true;
    },
    close() {
      this.showMask = false;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.bg-container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}
img {
  width: 100%;
}
.open-btn {
  position: fixed;
  right: 100px;
  bottom: 100px;
}
.mask-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  background: #fff;
  border-radius: 10px;
}
</style>

js、node.js获取指定文件下的内容

✇掘金 前端
小明记账簿_微信小程序

最近做一个语言切换功能，所有的的语言翻译都在同一个文件中，导致文件过大，难以维护于是想到了对文件按模块进行拆分，绞尽脑汁，查了各种资料，果然功夫不负有心人，现在方法总结出来，希望能帮助更多有需要的人。

一、js获取指定文件下的内容

首先jieshao

require.context

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

Webpack 会在构建中解析代码中的 require.context() 。

用法

require.context(directory, useSubdirectories = false, regExp = /^.//)

示例

读取template文件夹下面的所有js文件，并获取值；

项目环境：Vue2项目

目录结构

template

        dom.js

        tem.js

getmodules.js

// dom.js
module.exports = {
  dom: "我是dom"
};

// tem.js
module.exports = {
  tem: "我是tem"
};

const modulesFilesen = require.context("./template", true, /.js$/);
const modulesen = modulesFilesen.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^./(.*).js/, "$1");
  const value = modulesFilesen(modulePath);
  modules[moduleName] = value;
  return modules;
}, {});

// 结果
modulesen = {
  dom: {
    dom: "我是dom",
  },
  tem: {
    tem: "我是tem",
  },
};

 二、node.js获取指定文件下的内容 

node.js需要借助模块，主要处理文件的读写、复制、s删除、重命名等操作。

建议使用同步读取文件模块fs.readFileSync(cur, "utf8") ，防止出现文件读取不到的情况。

reduce()的用法可以参考另一篇博文。

// 第一步：引入 fs 文件系统模块
let fs = require("fs");

const dirName = "./template"; // 读取目标文件夹名称
const reg = /(?<=[.])[a-z]+/; // 文件后缀匹配规则

// 第二步：读文件夹，获取文件名列表
// 同步 readdir().返回文件数组列表
let fileList = fs.readdirSync(dirName);

// 第三步：过滤出想要的文件类型
let result = fileList.reduce((pev, cur) => {
  const curPicType = cur.match(reg)[0];
  if (["js"].includes(curPicType)) {
    // 同步读取
    let res = fs.readFileSync(cur, "utf8");
    pev[cur] = res;
  }
  return pev;
}, {});
// result = {
//   dom: {
//     dom: "我是dom",
//   },
//   tem: {
//     tem: "我是tem",
//   },
// };
❌