分享一个扁平化的展示页面

  • mayuko2012
  • 技术
  • 2018年05月24日 14:56
  • 91次访问
用户头像

这是一个扁平化风格的项目展示页面,风格类似于IFTTT。

Demo:lab.mayuko.cn

屏幕快照 2017-10-25 20.26.06.png

框架

  • Bootstrap(栅格化布局)
  • Vue

特点

  • 扁平化,响应式!
  • 可爱的loading动画!
  • 使用了Vue!

没错,最近在入Vue的坑,所以写了一个简单的页面来熟悉一下Vue。@(委屈)

动画

感觉超级棒的Loading,无耻的设置了1000ms的setTimeout。

2017-10-25 21_17_26.gif

代码

投食在Github,如果你也喜欢,求star。

总结

用到了Vue的以下:

1.组件

生成了一个card-item组件,并注册为全局组件。

<template id="card-item">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="card" :class="color">
            <div class="card-hd">
                <h1 class="card-hd__title"><li class="fa" :class="icon"></li></h1>
            </div>
            <div class="card-bd">
                <h1>{{title}}</h1>
                <h4>{{desc}}</h4>
            </div>
            <div class="card-ft">
                <div class="col-xs-6 text-left">
                    <li class="fa fa-clock-o">&nbsp;{{time}}</li>
                </div>
                <div class="col-xs-6">
                    <a v-bind:href="url" target="_blank">查看Demo</a>
                </div>

            </div>
        </div>
    </div>
</template>

全局注册,并将参数传递给组件:

Vue.component('card-item', {
    template: '#card-item',
    props: ['title', 'desc', 'icon', 'time', 'url', 'color'],
})

2.指令

  • v-bind || :
  • v-on || @
  • v-for
  • v-show
    <div class="container lab-body" id="card">
        <div class="row">
            <card-item v-for="item in itemArr" :key="item.key" :title="item.title" :desc="item.desc" :icon="item.icon" :time="item.time" :url="item.url" :color="item.color"></card-item>
        </div>
        <div class="mod model-3 loader" v-show="loading">
            <div class="spinner"></div>
        </div>
        <p class="card-more">
            <a class="card-btn" @click="isMore && loadMoreData()" v-show="isMore">{{moreText}}</a>
        </p>
    </div>

3.请求

网络请求使用了vue.resource。

1)引入js

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>

2)网络请求

this.$http.get(
    'get.php', {
        params: {
            page: this.page,
            count: this.count
        }
    }
).then(res => {
    if (res.data.code == 200) {
        console.log(res.data)
    } else {
        console.log('error')
    }
}, response => {
    console.log("error")
})

4.新的IDE

从Sublime Text3弃坑入坑到Atom,看惯了phpStorm和Sublime Text的配色,新的Atom配色简直太爽了~

屏幕快照 2017-10-25 21.21.47.png

Banner来源:Apple Inc. WWDC宣传海报。

EOF

0条回复

Tech2Day

一个分享生活的地方。

登录

还没有账号?注册账号

运行状态
注册会员
7
话题
7
回复
31
系统运行状态
PHP版本
7.1.18
系统版本
Linux
当前时间
1544422754