f7+vue测试页面，直接采用静态文件模式，因此不需要构建步骤，可以直接运行，商品图片来自淘宝，
更新：css, svg, js资源地址改为 jsdelivr ，framework7-vue也有网络资源了，推荐jsdelivr资源很全面，
问题：material-design-icon字体图标不显示，
项目地址：https://gitee.com/stumpx/f7-vue-shop-demo
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>f7-vue-shoptitle>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/framework7.material.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/framework7.material.colors.css">
<link rel="stylesheet" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/@icon/[email protected]/framework7-icons.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/[email protected]/framework7-icons.css">
<link rel="stylesheet" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/fontawesome-webfont.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.css">
<link rel="stylesheet" type="image/svg+xml" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.svg">
<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
<style>
.navbar a.link i + i,
.navbar a.link i + span,
.navbar a.link span + i,
.navbar a.link span + span,
.subnavbar a.link i + i,
.subnavbar a.link i + span,
.subnavbar a.link span + i,
.subnavbar a.link span + span,
.toolbar a.link i + i,
.toolbar a.link i + span,
.toolbar a.link span + i,
.toolbar a.link span + span {
margin-left: 0;
}
.tabbar-labels {
height: 64px;
}
.tabbar-labels.toolbar-bottom ~ .page-content {
padding-bottom: 64px;
}
.tabbar-labels a.link,
.tabbar-labels a.tab-link {
padding-top: 9px;
padding-bottom: 7px;
}
.navbar-inner {
overflow: inherit;
}
.navbar-inner :not(.subnavbar) {
overflow: hidden;
}
.subnavbar {
height: 44px;
margin-top: -1px;
}
.subnavbar a.link {
line-height: 14px;
font-size: 14px;
height: 100%;
}
.navbar-fixed.with-subnavbar .page-content {
padding-top: 105px !important;
}
style>
head>
<body>
<div id="app">
<f7-statusbar>f7-statusbar>
<f7-panel left reveal layout="dark">
<f7-view id="left-panel-view" navbar-through :dynamic-navbar="true">
<f7-pages>
<f7-page>
<f7-navbar title="Left Panel" sliding>f7-navbar>
<f7-block inner>
<p>Left panel content goes herep>
f7-block>
<f7-block-title>Load page in panelf7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About">f7-list-item>
<f7-list-item link="/form/" title="Form">f7-list-item>
f7-list>
<f7-block-title>Load page in main viewf7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel>f7-list-item>
<f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel>f7-list-item>
f7-list>
f7-page>
f7-pages>
f7-view>
f7-panel>
<f7-panel right cover layout="dark">
<f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
<f7-pages>
<f7-page>
<f7-navbar title="Right Panel" sliding>f7-navbar>
<f7-block>
<p>Right panel content goes herep>
f7-block>
<f7-block-title>Load page in panelf7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About">f7-list-item>
<f7-list-item link="/form/" title="Form">f7-list-item>
f7-list>
<f7-block-title>Load page in main viewf7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel>f7-list-item>
<f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel>f7-list-item>
f7-list>
f7-page>
f7-pages>
f7-view>
f7-panel>
<f7-views theme="red">
<f7-view id="main-view" toolbar-through :dynamic-navbar="true" main>
<f7-pages>
<page-home toolbar-through>page-home>
f7-pages>
f7-view>
f7-views>
<f7-popup id="popup">
<f7-view navbar-fixed>
<f7-pages>
<f7-page>
<f7-navbar title="Popup">
<f7-nav-right>
<f7-link close-popup>Closef7-link>
f7-nav-right>
f7-navbar>
<f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.f7-block>
f7-page>
f7-pages>
f7-view>
f7-popup>
<f7-login-screen id="login-screen">
<f7-view>
<f7-pages>
<f7-page login-screen>
<f7-login-screen-title>Loginf7-login-screen-title>
<f7-list form>
<f7-list-item>
<f7-label>Usernamef7-label>
<f7-input name="username" placeholder="Username" type="text">f7-input>
f7-list-item>
<f7-list-item>
<f7-label>Passwordf7-label>
<f7-input name="password" type="password" placeholder="Password">f7-input>
f7-list-item>
f7-list>
<f7-list>
<f7-list-button title="Sign In" close-login-screen>f7-list-button>
<f7-list-label>
<p>Click Sign In to close Login Screenp>
f7-list-label>
f7-list>
f7-page>
f7-pages>
f7-view>
f7-login-screen>
div>
<template id="com-toolbar">
<f7-toolbar bottom tabbar labels class="row no-gutter">
<f7-link icon-f7="home" :href="active == 'home'?'#':'/home/'" text="首页" class="col-auto" ignore-cache>f7-link>
<f7-link icon-f7="search" :href="active == 'search'?'#':'/search/'" text="搜索" class="col-auto" ignore-cache>f7-link>
<f7-link icon-f7="info" :href="active == 'center'?'#':'/center/'" text="我的" class="col-auto" ignore-cache>f7-link>
f7-toolbar>
template>
<template id="page-center">
<f7-page no-navbar name="center">
<f7-list media-list class="no-margin-v">
<ul class="no-border-v">
<li>
<a href="/info/" class="item-link">
<div class="item-content">
<div class="item-media">
<i class="icon fa fa-opencart bg-red color-white align-center" style="font-size: 36px;width: 60px;height: 60px;line-height: 60px;border-radius: 50%;">i>
div>
<div class="item-inner">
<div class="item-title">Titlediv>
<div class="item-title-row">
<div class="item-subtitle">Subtitlediv>
div>
<div class="item-text">Describediv>
div>
div>
a>
li>
ul>
f7-list>
<f7-list class="no-margin-v">
<f7-list-item link="/cart/" title="购物车" badge="5" badge-color="red">f7-list-item>
<f7-list-item link="/order/" title="我的订单">f7-list-item>
<f7-list-item link="/order/type/1" title="待付款">f7-list-item>
<f7-list-item link="/order/type/2" title="待收货">f7-list-item>
<f7-list-item link="/order/type/3" title="待评价">f7-list-item>
<f7-list-item link="/msg/" title="我的消息" badge="5" badge-color="red">f7-list-item>
f7-list>
<com-toolbar :active="active">com-toolbar>
f7-page>
template>
<template id="page-search">
<f7-page navbar-through hide-navbar-on-scroll with-subnavbar name="search">
<f7-navbar>
<f7-nav-left>
<f7-link>
<f7-icon fa="opencart">f7-icon>
f7-link>
f7-nav-left>
<f7-searchbar cancel-link="Cancel" placeholder="搜索" search-list="#search-list" :clear="true" @searchbar:search="onSearch" @searchbar:enable="onEnable" @searchbar:disable="onDisable" @searchbar:clear="onClear">f7-searchbar>
<f7-nav-right>
<f7-link>
<f7-icon fa="shopping-cart">f7-icon>
f7-link>
f7-nav-right>
<f7-subnavbar sliding class="no-padding-h">
<f7-link>综合排序f7-link>
<f7-link>销量优先f7-link>
<f7-link>
<f7-icon fa="filter"> 筛选f7-icon>
f7-link>
<f7-link v-if="showType == 'list'" @click.stop.prevent="showType = 'two'">
<f7-icon fa="th-list">f7-icon>
f7-link>
<f7-link v-if="showType == 'two'" @click.stop.prevent="showType = 'one'">
<f7-icon fa="th-large">f7-icon>
f7-link>
<f7-link v-if="showType == 'one'" @click.stop.prevent="showType = 'list'">
<f7-icon fa="square">f7-icon>
f7-link>
f7-subnavbar>
f7-navbar>
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found">f7-list-item>
f7-list>
<f7-list v-if="showType == 'list'" media-list class="searchbar-found no-margin-v" id="search-list">
<ul class="no-border-v">
<li v-for="n in dataArr" :key="n">
<a href="/item/" class="item-link">
<div class="item-content">
<div class="item-media">
<img src='https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg' style="max-width:60px;max-height:60px;">
div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">产品名称{{n}}div>
div>
<div class="item-subtitle">￥123div>
<div class="item-text">
<f7-grid>
<f7-col class="align-left">免运费f7-col>
<f7-col class="align-center">123人付款f7-col>
<f7-col class="align-right">上海f7-col>
f7-grid>
div>
div>
div>
a>
li>
ul>
f7-list>
<f7-block v-if="showType == 'two'" class="no-padding-h no-margin-v" style="margin-bottom:-5px;">
<f7-grid>
<f7-card v-for="n in dataArr" :key="n" class="col-50 no-margin-top no-margin-h" style="width: calc((100% - 35px*1)/ 2);margin-bottom:10px">
<f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;">f7-card-header>
<f7-card-footer class="no-padding-v">产品名称{{n}}f7-card-footer>
f7-card>
f7-grid>
f7-block>
<f7-block v-if="showType == 'one'" class="no-padding-h no-margin-v" style="margin-bottom:-5px;">
<f7-grid>
<f7-card v-for="n in dataArr" class="col-100 no-margin-top no-margin-h" style="width: calc((100% - 35px*0)/ 1);margin-bottom:10px">
<f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;">f7-card-header>
<f7-card-footer class="no-padding-v">产品名称{{n}}f7-card-footer>
f7-card>
f7-grid>
f7-block>
<com-toolbar :active="active">com-toolbar>
f7-page>
template>
<template id="page-home">
<f7-page navbar-through name="home">
<f7-navbar>
<f7-nav-left>
<f7-link href="/index/">
<f7-icon fa="opencart">f7-icon>
f7-link>
f7-nav-left>
<f7-searchbar cancel-link="Cancel" placeholder="搜索" :clear="true">f7-searchbar>
<f7-nav-right>
<f7-link>
<f7-icon fa="shopping-cart">f7-icon>
f7-link>
f7-nav-right>
f7-navbar>
<f7-swiper init pagination :params="{autoplay:true, loop:true, speed:2500, spaceBetween: 1, autoplayDisableOnInteraction: false}" style="min-height:100px;">
<f7-swiper-slide v-for="n in 5" :key="n"><img src="https://gw.alicdn.com/imgextra/TB237WpbQfb_uJkHFCcXXXagFXa_!!181-0-lubanu.jpg_q50.jpg" :title="n" style="width:100%;height:130px;background:lightgray"/>f7-swiper-slide>
f7-swiper>
<f7-block-title class="row no-margin-top">
<span>热卖span>
<f7-link href="search/type/1">更多>>f7-link>
f7-block-title>
<f7-block class="no-padding-h" style="margin-bottom:-5px;">
<f7-grid>
<f7-card v-for="n in 6" :key="n" class="col-50 no-margin-top no-margin-h" style="width: calc((100% - 35px*1)/ 2);margin-bottom:10px">
<f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;">f7-card-header>
<f7-card-footer class="no-padding-v">产品名称{{n}}f7-card-footer>
f7-card>
f7-grid>
f7-block>
<f7-block-title class="no-padding-top row">
<span>推荐span>
<f7-link href="search/type/1">更多>>f7-link>
f7-block-title>
<f7-block class="no-padding-h no-margin-bottom">
<f7-grid>
<f7-card v-for="n in 3" :key="n" class="col-33 no-margin-top no-margin-h" style="width: calc((100% - 35px*2)/ 3);margin-bottom:10px">
<f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;">f7-card-header>
<f7-card-footer class="no-padding-v">产品名称{{n}}f7-card-footer>
f7-card>
f7-grid>
f7-grid>
f7-block>
<com-toolbar :active="active">com-toolbar>
f7-page>
template>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/framework7.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/framework7-vue.js">script>
<script>
// Init F7 Vue Plugin
Vue.use(Framework7Vue)
// Init Page Components
Vue.component('com-toolbar', {
props: ['active'],
template: '#com-toolbar'
})
Vue.component('page-center', {
template: '#page-center',
data: function () {
return {
active: 'center'
};
}
})
Vue.component('page-search', {
template: '#page-search',
data: function () {
var arr = [];
for (var i = 0; i < 20; i++) arr.push(i + 1);
return {
dataArr: arr,
showType: 'list',
active: 'search'
};
},
methods: {
onSearch: function (query, found) {
console.log('search', query);
},
onClear: function (event) {
console.log('clear');
},
onEnable: function (event) {
console.log('enable');
},
onDisable: function (event) {
console.log('disable');
},
}
})
Vue.component('page-home', {
template: '#page-home',
data: function () {
return {
active: 'home'
};
}
})
// Init App
var app = new Vue({
el: '#app',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
material: true,
modalTitle: '',
modalButtonOk: '确认',
modalButtonCancel: '取消',
modalPreloaderTitle: '加载中...',
cache: false,
domCache: false,
pushState: true,
swipePanel: 'left',
swipeBackPage: false,
swipePanelThreshold: 15,
smartSelectBackText: '返回',
smartSelectPickerCloseText: '完成',
smartSelectPopupCloseText: '关闭',
swipePanelOnlyClose: true,
preloadPreviousPage: false,
uniqueHistory: false,
routes: [{
path: '/center/',
component: 'page-center'
},
{
path: '/search/',
component: 'page-search'
},
{
path: '/search/type/:typeId/',
component: 'page-search'
},
{
path: '/home/',
component: 'page-home'
}
],
}
});
script>
body>
html>