android 设置不缓存页面,Framework7 页面缓存设置的方法

下面我们来看一篇关于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 样式属性即可。

...

Default

White

Big

White

...

.col-25 {

padding:5px;

text-align:center;

}

.col-dark {

background:#222;

}

3，使用模态的方式显示加载指示符

上面的样例是直接将加载指示符放置在页面上。我们也可以通过 js 将其通过模态的方式自动显示在页面上。(既然是模态的，说明在加载指示符显示的时候我们是不可以进行任何操作的。)

比如我们可以在加载数据的时候将其弹出显示，告知用户当前正在加载。当加载完毕后自动将其关闭。

(1)样例效果图

点击链接后，在页面中央显示加载指示符。过个两秒，加载指示符自动消失。

原文:Framework7 - 加载指示符(Preloader)使用说明

(2)html页面代码

...

显示Indicator

...

(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)