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、js获取图片的主题色c插件 rgbaster.js :http://www.php.cn/js-tutorial-410349.html (亲测有效) 或 https://www.jianshu.com/p/2d435817e872
3、JS删除上一条浏览器历史记录的方法 : https://blog.csdn.net/weixin_42325340/article/details/82659988 (使用 location.replace 把当前的url替换掉,相当于删除了当前的url记录)
或 https://blog.csdn.net/qq_40963664/article/details/78561086
4、(这里研究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
5、很长的列表(如产品列表),拉到下面,需要有一个 回到顶部 的按钮。 https://blog.csdn.net/qq_36070288/article/details/84765139
6、进入页面时,数据没有请求完成,灰底背景 占位。两种实现
a、使用 vue-occupy 插件实现。https://segmentfault.com/a/1190000008511102 (不推荐,这种方式,每个动态显示数据的标签都需要额外添加属性)
b、使用 与页面相同结构的图片 先占位显示。github上 vue2-elm 项目 就是通过这种方法实现的,使用 svg图片 代替 整块DOM结构。
(可以通过一些工具实现svg图片代码,如 http://www.zuohaotu.com/svg/ 可以 直接生成 svg文件。也可以使用png图片,淘宝是通过png图片实现的,有彩色)
7、
n、H5 页面要实现分享 的功能 是通过跳链接实现的,把当前页面的 url 作为一个参数传递给分享的链接。 https://github.com/overtrue/share.js
没有分享链接的平台(如 微信,通过生成一个二维码,进入微信平台分享)
实际开发中 需要 考虑的问题:
1、实际稿上是所有的数据,和内容都是有的。但是用户使用时,页面上有的内容如果是通过后台配置的,这个时候需要考虑,配置的这块内容的 字数多少 或 图片有无。
必须项(这个是可以在后管中规定好的):基本就是考虑文字的多少、和图片的大小。
非必须项:就要 考虑文字或、图片 没有的时候 是否影响页面布局。
2、图片(背景图也一样)要设置 宽高,不能只是设置一个宽度。因为设计稿上图片,在H5页面中是通过后台上传的,后台上传的图片和设计稿上是图片不一定会是一样的宽高的。
即使上传的是一样的,但是在传送过程,压缩图片,都会存在宽(或高)相差几个像素的问题。相差几个像素进行拉伸是不会变形很大的(几像素的拉伸,用户是看不出来变形的)。