Framework7 页面缓存设置的方法

更新时间：2016年10月2日 16:23 点击：1815

下面我们来看一篇关于Framework7中页面缓存的一个配置了，希望文章能够让各位理解到Framework7 页面缓存设置吧。

Framework7 是使用 ajax 加载新页面的。所以为了效率，其默认是开启缓存的（同一个请求页面默认缓存时间是十分钟）。对于页面缓存相关配置，我们可以在初始化应用的时候进行设置。而如果我们用 Framework7 开发移动App 时，由于页面都打包到本地，完全可以把缓存关闭。

1，设置样例
Framework7 初始化的时候可以传入相关的配置对象。

// 初始化 app
var myApp = new Framework7({
          cache: true,
          cacheDuration: 1000*60*10,
          cacheIgnore: [],
          cacheIgnoreGetParameters: false
});

2，参数说明
（1）cache：是否打开 Ajax 缓存。最好启用Ajax缓存，特别是你的页面内容不经常更新的时候。（默认值：true）
（2）cacheDuration：Ajax 缓存时间，在缓存有效期内加载页面不会发起新的ajax请求而是直接使用缓存的结果。（默认是 10 分钟）
（3）cacheIgnore：不希望被缓存的URL，这是一个字符串数组。（默认为空数组）
（4）cacheIgnoreGetParameters：缓存是否忽略get参数，如果为 "true"，那么像 "about.html?id=2" 和 "about.html?id=3" 将会和 "about.html" 是一样的缓存。（默认值：false）

下面我们来看一篇关于Framework7中DOM7库Ajax、Get、Post数据请求例子，希望这篇文章能够给各位同学带来帮助。

1，Ajax请求
发送 Ajax 请求的代码格式如下：

$$.ajax(parameters)

方法里参数可选值如下：

使用样例：

$$(document).on('ajaxComplete', function (e) {
var xhr = e.detail.xhr;
console.log('request performed');
});

3，Get请求

虽然 Ajax 方法功能强大。但通常在项目中我们会更经常使用 Get 或 Post 方法，毕竟用起来方便很多。

Dom7.get 方法样例如下：

$$.get('blog-post.php', {foo:'bar', id:5}, function (data) {
$$('.articles').html(data);
console.log('Load was performed');
});

4，Post请求
Dom7.post 方法样例如下：

$$.post('auth.php', {username:'foo', password: 'bar'}, function (data) {
$$('.login').html(data);
console.log('Load was performed');
});

5，异步获取JSON数据
使用 Dom7.getJSON 我们可以通过 ajax 的方式获取服务器上的 json 数据，并自动转换成对象。使用样例如下：

$$.getJSON('items.json', function (data) {
console.log(data);
});

下面我们来看一篇关于Framework7 修改模态框默认文字（标题、确认|取消按钮、登录框提示）的例子，希望这篇文章能够帮助到大家的哦。

Framework7 提供了许多常用的模态框（Modal）如：告警框（Alert）、确认框（Confirm）、需要用户输入的提示框（Prompt）等等。默认情况下，这些弹出框的标题是“Framework7”，而确认按钮、取消按钮、登录框的提示文字等都是英文的。
比如：我在页面上弹出一个确认框。

myApp.confirm('是否开始查询?', function () {
//开始查询
});

默认效果图如下：

1，修改默认文字

在 Framework7 初始化的时候传入相关的配置对象即可。

// 初始化 app
var myApp = new Framework7({
          modalTitle: "hangge.com提示",
          modalButtonOk: "确定",
          modalButtonCancel: "取消",
          modalPreloaderTitle: "加载中...",
          modalUsernamePlaceholder: "用户名",
          modalPasswordPlaceholder: "密码"
});

2，参数说明
（1）modalTitle：模态框默认标题（默认值：Framework7）
（2）modalButtonOk：确认按钮文字（默认值：OK）
（3）modalButtonCancel：取消按钮文字（默认值：Cancel）
（4）modalPreloaderTitle：预加载模态框文字（默认值：Loading...）
（5）modalUsernamePlaceholder：登录模态框里用户名占位提示文字（默认值：Username）
（6）modalPasswordPlaceholder：登录模态框里密码占位提示文字（默认值：Password）

3，修改后效果图

下面我们来看一篇关于Framework7 加载指示符（Preloader）使用说明，希望这篇文章能够帮助到各位理解到Framework7 加载指示符哦。

Framework 7 提供了一个好用的加载指示符（Preloader），一个不断旋转的菊花状环形进度条。当我们页面需要加载数据，或者执行比较费时的操作时可以使用。
而且这个加载指示符是使用 SVG 绘制，并使用 CSS 来进行动画，所以可以很方便的改变它的大小。

1，加载指示符的使用

2，修改加载指示符的大小和颜色
（1）加载指示符有2个颜色供选择：其中一个颜色是配合亮色背景（默认样式），另一个颜色配合暗色背景。
（2）要改变大小，只要直接设置 width、height 样式属性即可。

<body>
...
<div class="page-content">
    <div class="content-block row">

      
      <div class="col-25">
        Default<br>
        <span class="preloader"></span>
      </div>

      
      <div class="col-25 col-dark">
        White<br>
        <span class="preloader preloader-white"></span>
      </div>

      
      <div class="col-25">
        Big<br>
        <span style="width:42px; height:42px" class="preloader"></span>
      </div>

      
      <div class="col-25 col-dark">
        White<br>
        <span style="width:42px; height:42px" class="preloader preloader-white"></span>
      </div>
    </div>

</div>
...
<style>
    .col-25 {
      padding:5px;
      text-align:center;
    }
    .col-dark {
      background:#222;
    }
</style>
</body>

3，使用模态的方式显示加载指示符
上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。（既然是模态的，说明在加载指示符显示的时候我们是不可以进行任何操作的。）
比如我们可以在加载数据的时候将其弹出显示，告知用户当前正在加载。当加载完毕后自动将其关闭。
（1）样例效果图
点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。
原文:Framework7 - 加载指示符（Preloader）使用说明

（2）html页面代码

<body>
...
<div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-indicator">显示Indicator</a></p>
    </div>
</div>
...
</body>

（3）js代码

$$('.open-indicator').on('click', function () {
myApp.showIndicator();
setTimeout(function () {
myApp.hideIndicator();
}, 2000);
});

4，Ajax请求时自动显示加载提示符

App 中如果有很多页面都有数据请求，要是每个请求都像上面一样都要手动添加代码显示、隐藏加载提示符。会略显麻烦。
我们可以在 Framework7 初始化的时候对 Ajax 请求进行拦截，进行统一处理。即发起请求时显示加载提示符，请求完毕后隐藏加载提示符。

// 初始化 app
var myApp = new Framework7({
          // ajax请求开始
          onAjaxStart: function (xhr) {
            myApp.showIndicator();
          },
          // ajax请求完毕
          onAjaxComplete: function (xhr) {
            myApp.hideIndicator();
          }
});

下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域，关闭弹出层的使用例子，具体的细节步骤如下文介绍。

1，Framework7中三大类弹出框

（1）模态框（modal）：默认点击外部区域不会关闭弹出框

模态框包括：告警框（Alert）、确认框（Confirm）、需要用户输入的提示框（Prompt）

（2）操作表（Action Sheet）：默认点击外部区会自动关闭

（3）弹出层（Popup）：默认点击外部区域会自动关闭

2，修改默认的关闭方式

如果想要点击模态框（modal）外部区域也会关闭模态框。或者不允许点击操作表（Action Sheet）、弹出层（Popup）外部区域时会自动关闭。
我们可以在 Framework7 初始化的时候可以进行如下修改。

// 初始化 app
var myApp = new Framework7({
          modalCloseByOutside: true,
          actionsCloseByOutside: false,
          popupCloseByOutside: false
});

3，参数说明
（1）modalCloseByOutside：模态框（modal）是否允许通过点击外部关闭（默认值：false）
（2）actionsCloseByOutside：操作表（Action Sheet）是否允许通过点击外部关闭（默认值：true）
（3）popupCloseByOutside：弹出层（Popup）是否允许通过点击外部关闭（默认值：true）

[!--infotagslink--]

上一篇: 为View添加阴影效果的工具类：ShadowViewHelper

下一篇: Android设置ListView滚动到某一位置

php 中file_get_contents超时问题的解决方法
file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25
HTTP 408错误是什么 HTTP 408错误解决方法
相信很多站长都遇到过这样一个问题，访问页面时出现408错误，下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因： HTT...2017-01-22
php抓取网站图片并保存的实现方法
php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30
Android子控件超出父控件的范围显示出来方法
下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
ps把文字背景变透明的操作方法
ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06
intellij idea快速查看当前类中的所有方法(推荐)
这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02
Mysql select语句设置默认值的方法
1.在没有设置默认值的情况下：复制代码代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31
js导出table数据到excel即导出为EXCEL文档的方法
复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2013-10-13
mysql 批量更新与批量更新多条记录的不同值实现方法
批量更新mysql更新语句很简单，更新一条数据的某个字段，一般这样写：复制代码代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值，mysql也很简单，修改下where即...2013-10-04
js基础知识（公有方法、私有方法、特权方法）
本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法公有方法就是能被外部访问...2015-11-08
ps怎么制作倒影 ps设计倒影的方法
ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。用ps怎么做倒影最终效果&#819...2017-07-06
PHP 验证码不显示只有一个小红叉的解决方法
最近想自学PHP ，做了个验证码，但不知道怎么搞的，总出现一个如下图的小红叉，但验证码就是显示不出来，原因如下未修改之前，出现如下错误；（1）修改步骤如下，原因如下，原因是apache权限没开，（2）点击打开php.int.，搜索extension=ph...2013-10-04
c#中分割字符串的几种方法
单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25
安卓手机wifi打不开修复教程，安卓手机wifi打不开解决方法
手机wifi打不开？让小编来告诉你如何解决。还不知道的朋友快来看看。手机wifi是现在生活中最常用的手机功能，但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21
js控制页面控件隐藏显示的两种方法介绍
javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位方法一：复制代码代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13
连接MySql速度慢的解决方法(skip-name-resolve)
最近在Linux服务器上安装MySql5后，本地使用客户端连MySql速度超慢，本地程序连接也超慢。解决方法：在配置文件my.cnf的[mysqld]下加入skip-name-resolve。原因是默认安装的MySql开启了DNS的反向解析。如果禁用的话就不能...2015-10-21
C#方法的总结详解
本篇文章是对C#方法进行了详细的总结与介绍，需要的朋友参考下...2020-06-25
Zend studio文件注释模板设置方法
步骤：Window -> PHP -> Editor -> Templates，这里可以设置（增、删、改、导入等）管理你的模板。新建文件注释、函数注释、代码块等模板的实例新建模板，分别输入Name、Description、Patterna)文件注释Name: 3cfileDescriptio...2013-10-04
EXCEL数据上传到SQL SERVER中的简单实现方法
EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码代码如下: if...2013-09-23
mysql锁定单个表的方法
mysql锁定单个表的方法复制代码代码如下:mysql>lock table userstat read; mysql>unlock tables; 页级的典型代表引擎为BDB。表级的典型代表引擎为MyISAM,MEMORY以及很久以前的ISAM。行级的典型代表引擎为INN...2014-05-31

Framework7 页面缓存设置的方法

相关文章

阁下可能感兴趣的内容

推荐阅读