programmer.png

Framework7 Single View Starter App Template

A simple single view Framework7 starter app template.

1. Usage

1. Download this repository

git clone https://github.com/biaochenxuying/framework7-demo.git my-app

Repository will be downloaded into my-app/ folder

2. Instal dependencies

Go to the downloaded repository folder and run:

npm install

This will download latest version of Framework7 (to /www/framework7/) and required icon fonts (to /www/fonts/)

3. Run the app

npm run serve

App will be opened in browser at http://localhost:8080/

Use with cordova

Just put the contents of www folder in your cordova's project root www folder

One command install

git clone https://github.com/biaochenxuying/framework7-demo.git my-app &&
cd my-app &&
npm install &&
npm run serve

配合本地服务( 如 nginx )可以访问不同的 indexX.html, 其中 http://192.168.0.134 是本地 ip

http://192.168.0.134/index.html
http://192.168.0.134/index1.html

2. 开启页面缓存与路由变化

• stackPages 和 pushState。

var app = new Framework7({
    root: '#app', // App root element
    view: {
        stackPages: true, // 路由跳转，多级页面缓存
        pushState: true, // 开启 url 根据路由 hash 变化
    },
});

3. 路由与多页面与可缓存总结

选项	支持多 tab	tab 切换，缓存	页面跳转，缓存	tab 切换，路由变	页面跳转，路由变
单 html 文件，例子 2	——	——	——	——	——
单 html 文件加 tab，例子 5	支持	支持	支持	不支持	支持
多 html 文件加路由，例子 1	——	——	支持	——	支持
多 html 文件加路由加多 tab（tabs-animated，Multiple Views Layout），例子 3 和 6	支持	支持	支持	不支持	支持
多 html 文件加路由加多 tab（tabs-routable 方式），例子 4	支持	不支持	支持	不支持	支持

注意：tabs-routable 方式的，pushState: false，可以直接通过 http://192.168.0.134/index4.html 访问到默认的 tab 页面； 但是 pushState: true，url 地址要加个 ! 号，才能访问到默认的 tab 。 如：http://192.168.0.134/index4.html#!/

4. 最后

关注公众号并回复 福利 可领取免费学习资料，福利详情请猛戳： Python、Java、Linux、Go、node、vue、react、javaScript

全栈修炼