实现 页面某些 效果

一、弹出遮罩层后禁止滚动效果：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; 就能够了

二、js获取图片的主题色c插件 rgbaster.js  ：http://www.php.cn/js-tutorial-410349.html （亲测有效） 或 https://www.jianshu.com/p/2d435817e872

三、JS删除上一条浏览器历史记录的方法 ： https://blog.csdn.net/weixin_42325340/article/details/82659988 （使用 location.replace 把当前的url替换掉，至关于删除了当前的url记录）

　　或  https://blog.csdn.net/qq_40963664/article/details/78561086

四、（这里研究Vue中的实现）跳转下一个页面，点击 浏览器返回按钮 再返回上一个页面，上一个页面数据不变。 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

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

六、进入页面时，数据没有请求完成，灰底背景 占位。两种实现

　　a、使用 vue-occupy 插件实现。http://www.javashuo.com/article/p-tukzmdts-eb.html （不推荐，这种方式，每一个动态显示数据的标签都须要额外添加属性）

　　b、使用 与页面相同结构的图片 先占位显示。github上 vue2-elm 项目 就是经过这种方法实现的，使用  svg图片 代替  整块DOM结构。

　　　（能够经过一些工具实现svg图片代码，如 http://www.zuohaotu.com/svg/ 能够 直接生成 svg文件。也可使用png图片，淘宝是经过png图片实现的，有彩色）

                                    

 

七、

 

 

 

 

 

n、H5 页面要实现分享 的功能 是经过跳连接实现的，把当前页面的 url 做为一个参数传递给分享的连接。 https://github.com/overtrue/share.js

　  没有分享连接的平台（如 微信，经过生成一个二维码，进入微信平台分享）

 

 

---

 

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

一、实际稿上是全部的数据，和内容都是有的。可是用户使用时，页面上有的内容若是是经过后台配置的，这个时候须要考虑，配置的这块内容的 字数多少 或 图片有无。

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

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

二、图片(背景图也同样)要设置 宽高，不能只是设置一个宽度。由于设计稿上图片，在H5页面中是经过后台上传的，后台上传的图片和设计稿上是图片不必定会是同样的宽高的。

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