zoukankan      html  css  js  c++  java
  • 实现 页面某些 效果

    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页面中是通过后台上传的,后台上传的图片和设计稿上是图片不一定会是一样的宽高的。

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

  • 相关阅读:
    java发送qq邮件
    HTTP3次握手和4次挥手
    Bootstrap面试题
    Bootstrap
    响应式布局
    JQuery思维导图
    JQuery相关知识点和面试题
    CSS思维导图
    前端面试题
    CSS3实现跑马效果
  • 原文地址:https://www.cnblogs.com/wfblog/p/10535999.html
Copyright © 2011-2022 走看看