zoukankan      html  css  js  c++  java
  • Sonni站点(移动端)

    本篇list

    1.项目预览
    2.项目介绍
    3.项目开发
    --3.1移动端样式初始化
    --2.2 解决三秒点击延迟事件
    --2.3 完成静态页面布局
    --2.4利用vue实现数据响应式
    --2.5 实现删除功能
    --2.6 添加背景切换功能(图片闪动,键盘呼出问题)
    

    项目预览:https://jackson01.gitee.io/mobile_site

    1. 项目介绍

    Sonni站点是一个H5,移动端的站点,利用了VUE,js,html,css技术点。集成了网站搜索和网址保存的功能。方便用户保存经常访问的网址。

    如何使用:

    1.您点击屏幕上的加号添加网站。
    2.右下角的修改图标,点击可以修改您喜欢的背景片
    3.点击右下角的删除标识,切换到删除状态,点击叉号即可删除网址。删除完点击删除标识退出删除状态。
    4.上方提供搜索功能,利用bing的浏览器进行搜索。
    

    项目界面如下:

    在这里插入图片描述

    2.项目开发

    2.1 移动端样式初始化呢

    2.2 解决三秒点击延迟事件

    2.3 完成静态页面布局

    2.4利用vue实现数据响应式

    2.5 实现删除功能

    2.6 添加背景切换功能

    遇到的问题:
    1. 当呼出键盘时,页面的背景会向上移动。
    2. 当切换背景图片时,背景图片会出现闪动。
    
    问题解决:
    1. 因为呼出我们设置的html,body高度是100%。当键盘呼出时实际的高度时(100%-键盘的高度),就是把html,body挤上去了。所以我们要把高度固定,这个高度就是访问设备的高度。------代码如下:
      document.getElementsByTagName("body")[0].style.height = window.innerHeight+'px';

    2. 原来我们切换背景时只是把body换成,我们定义好不同背景的类。但是当我们第一次切换的时候,浏览器要重新渲染背景,所以会出现闪动的问题。所以我们需要在图片被读取完时添加到背景图片属性上代码如下: let img = new Image(); img.src = "xxx.jpg"; img.onload = function () { document.body.style.backgroundImage = "url(" + img.src + ")"; }

  • 相关阅读:
    4.9新随笔
    4.2上机作业
    3.30作业
    3.26上机练习
    作业十
    作业九
    作业八
    作业六
    作业五
    作业三
  • 原文地址:https://www.cnblogs.com/jackson1/p/13335594.html
Copyright © 2011-2022 走看看