Framework7 vue demo

時間  2019-11-13
標籤 framework7 framework vue demo 简体版
原文   原文鏈接

f7+vue測試頁面，直接採用靜態文件模式，所以不須要構建步驟，能夠直接運行，商品圖片來自淘寶，css

更新：css, svg, js資源地址改成 jsdelivr ，framework7-vue也有網絡資源了，推薦jsdelivr資源很全面，html

問題：material-design-icon字體圖標不顯示，vue

項目地址：https://gitee.com/stumpx/f7-vue-shop-demogit

<!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-shop</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@1.7.1/dist/css/framework7.material.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@1.7.1/dist/css/framework7.material.colors.css">
    <link rel="stylesheet" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/@icon/framework7-icons@0.9.2/framework7-icons.svg">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/framework7-icons@0.9.2/framework7-icons.css">
    <link rel="stylesheet" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/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">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Left Panel -->
    <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 here</p>
                    </f7-block>
                    <f7-block-title>Load page in panel</f7-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 view</f7-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>

    <!-- Right 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 here</p>
                    </f7-block>
                    <f7-block-title>Load page in panel</f7-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 view</f7-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>

    <!-- Main Views -->
    <f7-views theme="red">
        <f7-view id="main-view" toolbar-through :dynamic-navbar="true" main>
            <!-- Pages -->
            <f7-pages>
                <page-home toolbar-through></page-home>
            </f7-pages>
        </f7-view>
    </f7-views>

    <!-- Popup -->
    <f7-popup id="popup">
        <f7-view navbar-fixed>
            <f7-pages>
                <f7-page>
                    <f7-navbar title="Popup">
                        <f7-nav-right>
                            <f7-link close-popup>Close</f7-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>

    <!-- Login Screen -->
    <f7-login-screen id="login-screen">
        <f7-view>
            <f7-pages>
                <f7-page login-screen>
                    <f7-login-screen-title>Login</f7-login-screen-title>
                    <f7-list form>
                        <f7-list-item>
                            <f7-label>Username</f7-label>
                            <f7-input name="username" placeholder="Username" type="text"></f7-input>
                        </f7-list-item>
                        <f7-list-item>
                            <f7-label>Password</f7-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 Screen</p>
                        </f7-list-label>
                    </f7-list>
                </f7-page>
            </f7-pages>
        </f7-view>
    </f7-login-screen>
</div>

<!-- toolbar Component Template -->
<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>

<!-- center Page 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">
                                <!--<img src='img/info.png' style="max-width:80px;max-height:800px;border-radius:50%">-->
                                <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">Title</div>
                                <div class="item-title-row">
                                    <div class="item-subtitle">Subtitle</div>
                                </div>
                                <div class="item-text">Describe</div>
                            </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>

<!-- search 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">￥123</div>
                                <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>

<!-- home 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/framework7@1.6.5/dist/js/framework7.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/framework7-vue@0.9.2/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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程