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 + ")"; }