Vue2.0 + Vux案例:爱柯南之完成首页基本样式

Posted 静茹♂鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2.0 + Vux案例:爱柯南之完成首页基本样式相关的知识,希望对你有一定的参考价值。

转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_2.html

 

项目github地址:https://github.com/shamoyuu/vue-vux-iconan

首先先修正上一章的一个问题,就是footer的定位,默认是absolute,我们改成fixed。

<style scoped>
    .main-footer {
        position: fixed;
    }
</style>

然后修改App.vue,给app底部留出50px导航的位置。

#app {
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden;
}

 

然后我们修改Home.vue,添加一个vux的轮播图。

首先引入组件

import {Swiper, SwiperItem} from \'vux\'

然后添加一点数据

swiperList: [
    {
        img: \'http://shamoyuu.bj.bcebos.com/iconan%2Fmain%2F1.jpg\',
        title: \'标题1\',
        url: \'http://meleong.duapp.com/\'
    },
    {
        img: \'http://shamoyuu.bj.bcebos.com/iconan%2Fmain%2F2.jpg\',
        title: \'标题2\',
        url: \'http://meleong.duapp.com/\'
    },
    {
        img: \'http://shamoyuu.bj.bcebos.com/iconan%2Fmain%2F3.jpg\',
        title: \'标题3\',
        url: \'http://meleong.duapp.com/\'
    }
]

url表示点击时跳转的url,img就是图片的连接,title是标题

然后添加模板

<swiper :list="swiperList" auto loop :aspect-ratio="350/750"></swiper>

auto表示自动播放,loop表示循环,aspect-ratio表示高度自动计算,如果想等比缩放,这里就把图片比例输进去。

 

然后我们给首页添加一个推荐漫画的模块

首先新建components/main/home/Recommend.vue文件

<template>
    <div class="opus">
        <h4 class="title">{{opus.title}}</h4>
        <div class="summary">{{opus.summary}}</div>
        <div class="opus-imgs">
            <img :src="opus.imgs[0]" class="opus-img">
            <img :src="opus.imgs[1]" class="opus-img">
            <img :src="opus.imgs[2]" class="opus-img">
        </div>
    </div>
</template>
<script>
    export default {
        props: ["opus"]
    }
</script>
<style scoped lang="less">
    .opus {
        padding: 3vw 2.22vw 5vw 2.22vw;
        border-bottom: 2px solid #efefef;
    }
    .summary {
        color: #6a6a6a;
        font-size: 14px;
    }
    .opus-imgs {
        display: flex;
        justify-content: space-between;
        
        .opus-img {
            width: 30.93vw;
            height: 30.93vw;
            border-radius: 7px;
        }
    }
</style>

它的数据由父组件传递。

然后修改它的父组件Home.vue,添加opues对象

opuses: [
    {
        title: \'标题\',
        summary: \'这是一个很好看的漫画\',
        imgs: [
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover1.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover2.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover3.jpg\'
        ]
    },
    {
        title: \'标题标题标题\',
        summary: \'这是一个很好看的漫画,可能很好看,应该很好看\',
        imgs: [
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover3.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover1.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover2.jpg\'
        ]
    },
    {
        title: \'标题标题标题标题标题\',
        summary: \'这是一个很好看的漫画,可能很好看,可能很好看,应该很好看\',
        imgs: [
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover1.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover3.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover2.jpg\'
        ]
    },
    {
        title: \'标题标题标题\',
        summary: \'这是一个很好看的漫画,应该很好看\',
        imgs: [
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover3.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover1.jpg\',
            \'http://shamoyuu.bj.bcebos.com/iconan%2Ftest%2Fconan-cover3.jpg\'
        ]
    }
]

然后在template里添加

<recommend :opus="o" v-for="o in opuses" ></recommend>

引入组件的过程就略了。

 

 

以上是关于Vue2.0 + Vux案例:爱柯南之完成首页基本样式的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 +vux+webpack 跨域代理 以及vux ajax请求插件 的拦截请求 验证key

vue2.0 + vux NewsList 资讯页

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例

vue2.0封装自己的ajax模块

Vue2.0使用总结中......

vue2.0+echarts可视化图形开发中遇到的问题总结