# framework7-demo

**Repository Path**: biaochenxuying/framework7-demo

## Basic Information

- **Project Name**: framework7-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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/framework7io/framework7-template-single-view 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. Live Preview