Framework7 vue demo

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>

 

你可能感兴趣的:(Framework7 vue demo)