样式问题
1、滚动条不能拖动
- 设置 touch-action
- auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
- none：禁止触发默认的手势操作。
- pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
- pan-y：可以在父级元素内进行垂直移动的手势操作。
- manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持
- 能滚动说明外层是有滚动条直接外层加上 over-flow: hidden;
2、父组件修改子组件样式失败： 因为有 scoped 属性, 所以在子组件的 class 类名前添加 ::v-deep。
3、animation 动画效果:
- @keyframes name { 0% {background-position: 0 0;}100% {background-position: 0 -542px; }
- .class { animation: name 20s linear infinite }。
4、a标签跳转锚点问题 （prerender-spa-plugin优化情况下）
- 监听 locatian.href 是否包含 #, 再动态创建 a 标签模拟点击失效, 原因未知。最后还是使用了 a 标签跳转。
- a标签的不跳转实现的方式
- href='#'; 不跳转到新页面但是会回到顶部，不推荐使用。
- href='javascript:;' || href='javascript: void(0);' 当前位置不跳转。
- onclick='return false' 阻止默认事件发生。
- 使用window.scrollTo({ left: '', top: '' });
5、div 自身偏移: 使用相对定位。
- 使用 position: relative; top: -20px;
6、过渡动画 transition: all .5s ease-in .1s;
- 需要注意 display: none; 是不会被监听到，所以没有过渡效果。
- 可以使用 opacity: 0; 来代替。
7、iphone13 pro 底部黑线遮挡问题
- 判断分辨率后：重新设置DOM高度，使用 100vh - 黑条部分高度。
- 也有可能是设置了固定宽度，导致字体显示失败。
8、1px和0.5px的问题(现代手机一般不会有这个问题)
- 查询手机端的设备像素比值 window.devicePixelRatio = 设备物理像素 / css像素。
- 如果设备物理像素为 2 , 那么 1px 渲染就为 2 倍，因为最小为2px。
- 使用媒体查询 设置缩放比。
9、animation 逐帧动画最后一帧闪烁？
- 百分比缩放问题？？？。
- 背景图默认 不要设置 center no-repeat。
- 图片尺寸要和设计图一致？ 或者使用 step-star
10、display: flex; 设置宽高生效需要添加两个属性
- flex-grow:0;
- flex-shrink:0;
- 这种方式也可行 flex-wrap: wrap;
11、iphone 使用a标签锚点不会跳转
- 只能使用 JS 事件实现 window.scrollTo({left: '', top: ''})。
11、position: fixed; top: 0;竟然跟顶部还有距离，上下滚动的时候图直接穿透了
- 第一种方法*{margin:0px;padding:0px;}，没点用。
- 第二种 样式修改 position: fixed; top: 0; => position: fixed; top: -5px; padding-top: 5px。完美解决。
12、苹果手机字体粗细设置失败(需要设置苹果字体)
- 加上属性就可以？？？ font-family: PingFangSC-Regular, PingFang SC;
13、粘性布局 position: sticky; top:50px;
- 有点像 position:fiexd; 但它是基于父容器的定位。
- 如果它的父容器不在滚动视图里了，那么也会消失。
14、requestAnimationFrame(function(){});
- 使用requestAnimationFrame代替setTimeout，减少了重排的次数，极大提高了性能，建议大家在渲染方面多使用requestAnimationFrame
- 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。比如，通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。
- 另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。
- 用过setTimeout实现js动画的人一定知道，在显示器的刷新频率为60Hz的时候，如果将动画的刷新频率设置为每秒刷新60次以上，会出现掉帧的问题，导致动画不连贯。
- 简单一点理解requestAnimationFrame，它会按照你设置的刷新频率和显示器支持的最大刷新频率之间，取较小的那个值。
vue
1、插件安装。更改页签头部内容。
2、安装插件等比例放大（rem）。
3、使用vantUI，插件嵌套使用方式。
4、首屏优化 SEO 优化，白屏优化。
5、package.json
- {
- "name": "hello-world",
- "version": "0.1.0",
- "private": true,
- "scripts": {
- "serve": "vue-cli-service serve",
- "build:prod": "vue-cli-service build",
- "build:dev": "vue-cli-service build --mode development",
- "lint": "vue-cli-service lint"
- },
- "dependencies": {
- "amfe-flexible": "^2.2.1",
- "axios": "^0.27.2",
- "babel-plugin-import": "^1.13.0",
- "core-js": "^3.6.5",
- "fastclick": "^1.0.6",
- "less": "^3.12.2",
- "less-loader": "^6.2.0",
- "postcss-pxtorem": "^5.1.1",
- "prerender-spa-plugin": "^3.4.0",
- "puppeteer": "^5.2.1",
- "shortid": "^2.2.15",
- "vant": "^2.9.3",
- "vue": "^2.6.11",
- "vue-router": "^3.3.4",
- "vue-wechat-title": "^2.0.7"
- },
- "devDependencies": {
- "@vue/cli-plugin-babel": "~4.4.0",
- "@vue/cli-plugin-eslint": "~4.4.0",
- "@vue/cli-service": "~4.4.0",
- "babel-eslint": "^10.1.0",
- "eslint": "^6.7.2",
- "eslint-plugin-vue": "^6.2.2",
- "svg-sprite-loader": "^5.0.0",
- "vite-plugin-style-import": "^1.4.1",
- "vue-template-compiler": "^2.6.11"
- },
- "eslintConfig": {
- "root": true,
- "env": {
- "node": true
- },
- "extends": [
- "plugin:vue/essential",
- "eslint:recommended"
- ],
- "parserOptions": {
- "parser": "babel-eslint"
- },
- "rules": {}
- },
- "postcss": {
- "plugins": {
- "autoprefixer": {}
- }
- },
- "browserslist": [
- "> 1%",
- "last 2 versions",
- "not dead"
- ]
- }
[code]const PrerenderSPAPlugin = require("prerender-spa-plugin");// eslint-disable-next-line no-unused-varsconst Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const path = require("path");// 将传入的相对路径转换为绝对路径function resolvePath(dir) { return path.join(__dirname, dir);}const autoprefixer = require("autoprefixer");const pxtorem = require("postcss-pxtorem");module.exports = { outputDir: "dist", publicPath: "/", // publicPath: "/official-h5/", // outputDir: 'dist/official-h5/', configureWebpack: () => { if (process.env.NODE_ENV !== "production") return; let plugins = []; plugins.push( new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, "dist"), // indexPath: path.join(__dirname, 'dist/official-h5/index.html'), // outputDir: path.join(__dirname, './'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 // routes: [ // "/official-h5", // "/official-h5/about", // "/official-h5/wisdom-city-solution", // "/official-h5/wisdom-env-solution", // "/official-h5/wisdom-water-solution", // "/official-h5/wisdom-park-solution", // "/official-h5/wisdom-env-product", // "/official-h5/wisdom-water-product", // "/official-h5/wisdom-park-product", // "/official-h5/careers" // ], // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: [ "/", "/about", "/news-content", "/productSmartWater", "/productSmartZeroCarbon" ], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ // inject: { // foo: "bar" // }, // headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: "render-event", // headless: true, // inject: {} }), // postProcess(renderedRoute) { // renderedRoute.html = renderedRoute.html // .replace( // /()/gi, // `$1/official-h5/$2$3` // ) // .replace( // /( |
