用户体验—优化页面效果

1、弹出遮罩层后禁止滚动效果：https://www.cnblogs.com/huangenai/p/6236426.html 或 https://www.cnblogs.com/JimmyBright/p/6647045.html 或 https://blog.csdn.net/weixin_40785245/article/details/80520524 （亲测有效）

body,html 的 overflow: hidden; 就可以了

2、跳转下一个页面，点击 浏览器返回按钮 再返回上一个页面，上一个页面数据不变。 https://www.jianshu.com/p/d1ccef6d8c58

　  说明：这个用户体验是很重要的，比如，一个很长的产品列表页，点击进入详情页。返回产品列表页时，重新刷新的话，

　　　　  客户又得从头开始下拉去找到之前看过的那个产品，继续往下看其它的产品。（如果返回产品列表页时，还是进入产品详情页前的那个产品列表页，用户体验会非常好）

 　实现：这种需求的实现 还是使用vue自带的  keep-alive 组件进行来实现。具体实现可以  参考  github上 vue2-elm 项目的实现

            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>  <!-- 需要缓存起来的组件在这显示 -->
            </keep-alive>

            <router-view v-if="!$route.meta.keepAlive"></router-view> <!-- 不需要缓存起来的组件在这显示 -->

        //所有商铺列表页
        {
            path: '/msite',
            component: msite,
            meta: { keepAlive: true }, // 需要缓存起来的组件在这设置
        },
        //特色商铺列表页
        {
            path: '/food',
            component: food
        },

 　　keep-alive实践总结 参考：https://www.cnblogs.com/sysuhanyf/p/7454530.html

3、很长的列表（如产品列表），拉到下面，需要有一个 回到顶部  的按钮。  https://blog.csdn.net/qq_36070288/article/details/84765139

4、在静态页面开发中，所有需要点击的按钮都使用input或button标签来实现，因为这两类标签中有disabled属性（像获取验证码、动态码这种功能，有倒计时的，点击一次就不可以马上再点击的）。
   但是所有标签都可以使用 去除事件 绑定的方法达到禁用的效果。

5、禁止浏览器请求  favicon.ico 文件：默认浏览器会请求网站根目录的这个图标，如果网站根目录没有的话，就会报404错误。通过设置 link 标签可以禁用浏览器的这个默认行为。https://www.cnblogs.com/foreverlin/p/10189069.html

  <link rel="icon" href="data:;base64,=">

6、img标签设置默认图片：当图片地址无效时，img直接显示alt的文字。 但是默认的 alt 内容太难看，这时可以用一直默认的图片替代。    https://www.cnblogs.com/chenyablog/p/11820717.html

  <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.onerror=null"/>

7、全屏 显示的 组件 一定要考虑 后退和前进的问题（点击手机物理返回键， 关闭弹窗组件， 不跳页面）：https://blog.csdn.net/qq_40095973/article/details/82663668

8、vue首屏比较慢的话，使用 loading图，提升用户体验 

9、前端中所有的按钮，点击后发送报文的标签，都必须加上 去重功能。防止重复发送信息（有的信息重复发送是有很大问题的，比如金融中的借钱，发送1次，发送多次，金额是会累加的。客户明明是借了1次，但是账户上显示金额很多，肯定会引发纠纷）。

 

 

 

---

 

实际开发中 需要 考虑的问题：

1、实际稿上是所有的数据，和内容都是有的。但是用户使用时，页面上有的内容如果是通过后台配置的，这个时候需要考虑，配置的这块内容的 字数多少 或 图片有无。

　  必须项（这个是可以在后管中规定好的）：基本就是考虑文字的多少、和图片的大小。

　  非必须项：就要  考虑文字或、图片 没有的时候  是否影响页面布局。

2、图片(背景图也一样)要设置 宽高，不能只是设置一个宽度。因为设计稿上图片，在H5页面中是通过后台上传的，后台上传的图片和设计稿上是图片不一定会是一样的宽高的。

　   即使上传的是一样的，但是在传送过程，压缩图片，都会存在宽（或高）相差几个像素的问题。相差几个像素进行拉伸是不会变形很大的（几像素的拉伸，用户是看不出来变形的）。