html5总结（1）

傷城~ 2021-11-26 13:26 258阅读 0赞

**1.页面滚动效果**

mui.plusReady(function() \{  
        mui('.mui-scroll-wrapper').scroll();  
    \})

**2.解决点击页面文本框导致页面放大**

<！ - 宽度设置为设备实际宽度，初始化倍数为1，最小倍数为1，最大倍数为1，用户缩放为否 - >

它的作用就是让设备的viewport的width等于设备的width;同时禁止了设备的手动缩放功能。

**3.使用mui 发送异步请求**

mui.ajax('http://61.163.34.143:8090/zzdy_oa/user/userAll', {
                dataType: 'json', //服务器返回json格式数据
                type: 'post', //HTTP请求类型
                timeout: 10000, //超时时间设置为10秒；
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function(data) {
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    var empslist = data.extend.list;
                    //plus.storage.setItem("empslist" ,empslist);
                    console.log("---" + empslist);
                    emps(empslist);
                },
                error: function(xhr, type, errorThrown) {
                    //异常处理；
                    console.log(type);
                }
            });

**4，页面之间传值**

另一个页面接收：

var self = plus.webview.currentWebview();
    
    var ToUserId =self.ToUserId;//获得参数
    
      var    toName = self.Name;

如果参数是int型，接收参数的时候转为String型(toString())

**5，web存储**

HTML 5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储（数据存储期是持久化的，并且没有容量限制）

sessionStorage - 针对一个 session 的数据存储

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

实例

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

sessionStorage 方法 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

实例

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

**6，html5开发移动端通过plus.storage可获取应用本地数据管理对象**

详情链接[http://www.html5plus.org/doc/zh\_cn/storage.html][http_www.html5plus.org_doc_zh_cn_storage.html]

*  [getLength][]: 获取应用存储区中保存的键值对的个数
 *  [getItem][]: 通过键(key)检索获取应用存储的值
 *  [setItem][]: 修改或添加键值(key-value)对数据到应用数据存储中
 *  [removeItem][]: 通过key值删除键值对存储的数据
 *  [clear][]: 清除应用所有的键值对存储数据
 *  [key][]: 获取键值对中指定索引值的key值

存值

plus.storage.setItem(ToUserId,"11122");

取值

var    chatRecord=plus.storage.getItem(ToUserId);

清除单个存储键值对

plus.storage.removeItem(ToUserId);

**6.如何想执行某个js方法之后刷新页面**

location.reload();

**7，如何a页面跳转到b页面修改某些条件然后自动返回，a页面执行刷新**

比如更换在线聊天背景，返回背景随之改变

修改背景页面

聊天页面

mui.init();
         	window.addEventListener('refresh', function(e){//执行刷新
         		if(e.detail.id==1){
                      location.reload();
                     }
                });

8，如果需要隐藏iOs的上下状态栏实现全屏，只需要再meta标签中加入如下代码就能轻松实现：

欢迎 留言，交流 ！

[http_www.html5plus.org_doc_zh_cn_storage.html]: http://www.html5plus.org/doc/zh_cn/storage.html
[getLength]: http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getLength
[getItem]: http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem
[setItem]: http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
[removeItem]: http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.removeItem
[clear]: http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.clear
[key]: http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.key