Vue webAPP首頁開發（一）_ZenDei技術網路在線

接上篇 https://www.cnblogs.com/chenyingying0/p/12609330.html 首先說下格式化的問題： vscode可以安裝Vetur插件安裝之後重啟編輯器，滑鼠右鍵，有一個格式化代碼選項，點擊即可首先放出文件路徑，先讓小伙伴們熟悉下結構 Navbar 組件： ...

接上篇 https://www.cnblogs.com/chenyingying0/p/12609330.html

首先說下格式化的問題：

vscode可以安裝Vetur插件

安裝之後重啟編輯器，滑鼠右鍵，有一個格式化代碼選項，點擊即可

首先放出文件路徑，先讓小伙伴們熟悉下結構

Navbar 組件：

在base目錄下創建navbar目錄，裡面創建index.vue

<template>
    <div class="mine-navbar">
        <!-- v-if作用：插槽存在內容則顯示，不存在則隱藏 -->
        <div class="mine-navbar-left" v-if="$slots.left">
            <slot name="left"></slot>
        </div>
        <div class="mine-navbar-center" v-if="$slots.center">
            <slot name="center"></slot>
        </div>
        <div class="mine-navbar-right" v-if="$slots.right">
            <slot name="right"></slot>
        </div>
        <h1 class="mine-navbar-title" v-if="title">
            <!-- 解決flex佈局和ellipsis佈局衝突的問題 -->
            <!-- 外面控制flex佈局，裡面控制ellipsis隱藏 -->
            <span class="mine-navbar-text" v-text="title"></span>
        </h1>
    </div>
</template>

<script>
export default {
   name:"MeNavbar",
   props:{//過濾器
       title:{
           type:String,
           default:''
       }
   }
}
</script>

<style lang="scss" scoped>
    @import '~assets/scss/mixins';
    .mine-navbar{
        @include flex-between();
        height:50px;
        background:#fff;
        position:relative;

        // &指代父元素
        &-left{
            margin-left:10px;
            // 當left和center都不存在，設置right為絕對定位，避免它跑到左邊
            // ~代表該元素之後的兄弟元素
            ~.mine-navbar-right{
                position:static;
            }
        }

        &-center{
            flex:1;
            margin:0 10px;
            ~.mine-navbar-right{
                position:static;
            }
        }

        &-right{
            margin-right:10px;
            position:absolute;
            right:0;
        }

        &-title{
            position:absolute;
            top:0;
            left:0;
            left:20%;
            right:20%;
            @include flex-center();    
            text-align:center;
                   
        }

        &-text{
            width:100%;
            line-height:1.5;// 因為設置了溢出隱藏，當英文字母過高時會顯示不全 
            font-size:18px;
            @include ellipsis();
        }
    }
</style>

首頁home目錄下的header.vue

<template>
    <div>
        <MeNavbar class="header">
            <i class="iconfont icon-scan" slot="left"></i>
            <div slot="center">搜索框</div>
            <i class="iconfont icon-msg" slot="right"></i>
        </MeNavbar>
    </div>
</template>

<script>
import MeNavbar from 'base/navbar';
export default {
   name:"HomeHeader",
   components:{
       MeNavbar
   }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線，否則會報錯
    @import "~assets/scss/mixins";
    .header{
        &.mine-navbar{
            background:transparent;
        }

        .iconfont{
            font-size:$icon-font-size;
            color:$icon-color-default;
        }
    }
    
</style>

在_mixins.scss中新增flex-between

現在的效果：

幻燈片組件--swiper：https://www.npmjs.com/package/vue-awesome-swiper

首先下載 cnpm install swiper vue-awesome-swiper --save

模擬伺服器端提供的數據 http://www.imooc.com/api/home/slider

因為要使用ajax發送請求，因此需要安裝axios

cnpm install --save axios

在api目錄下創建config.js，用來存放常量

export const SUCC_CODE=0;
export const TIMEOUT=10000;

在api目錄下創建home.js，用來使用axios模擬從伺服器獲取slider數據

import axios from 'axios';
import {SUCC_CODE,TIMEOUT} from './config';

//獲取幻燈片數據 ajax
export const getHomeSliders=()=>{
    // es6使用promise代替回調
    // axios返回的就是一個promise
    // return axios.get('http://www.imooc.com/api/home/slider').then(res=>{
    //     console.log(res);
    //     if(res.data.code===SUCC_CODE){
    //         return res.data.slider;
    //     }

    //     throw new Error('沒有成功獲取到數據');
    // }).catch(err=>{
    //     console.log(err);
    //     //錯誤處理
    //     return [{       
    //         linkUrl:'www.baidu.com',
    //         picUrl:require('assets/img/404.png')
    //     }]
    // });

    //演示超時錯誤
    return axios.get('http://www.imooc.com/api/home/slider',{
        timeout:TIMEOUT
    }).then(res=>{
        console.log(res);
        if(res.data.code===SUCC_CODE){
            return res.data.slider;
        }

        throw new Error('沒有成功獲取到數據');
    }).catch(err=>{
        console.log(err);
        //錯誤處理
        return [{       
            linkUrl:'www.baidu.com',
            picUrl:require('assets/img/404.png')
        }]
    });
}

在base目錄下創建slider目錄，裡面創建index.vue，這是基礎的slider組件樣式（可多個項目通用）

<template>
    <div class="mine-slider">
        <!-- 動態的屬性前面加冒號 -->
        <swiper :options="swiperOption" class="swiper-container">
            <slot></slot>
            <div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import { Swiper } from 'vue-awesome-swiper';

export default {
    name:"MeSlider",
    components: {
        Swiper
    },
    props:{
        direction:{
            type:String,
            default:'horizontal',
            validator(value){
                // 返回true則驗證通過
                return [
                    'horizontal',
                    'vertical'
                ].indexOf(value)>-1;
            }
        },
        interval:{//自動輪播
            type:Number,
            default:3000,
            validator(value){
                return value>=0;
            }
        },
        loop:{//無縫滾動
            type:Boolean,
            default:true
        },
        pagination:{//分液器
            type:Boolean,
            default:true
        }
    },
    data(){
        return{
            swiperOption:{
                watchOverflow:true,//只有一張圖片時不設置滾動效果
                direction:this.direction,//滾動方向
                autoplay:this.interval?{
                    delay:this.interval,
                    disableOnInteraction:false//手指滑動時是否停止自動輪播
                }:false,
                slidesPerView:1,//同時顯示幾張圖片
                loop:this.loop,//是否開啟無縫滾動
                pagination:{//分頁器
                    el:this.pagination?'.swiper-pagination':null
                }

            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '~assets/scss/mixins';
    .swiper-container{
        width:100%;
        height:100%;
    }
</style>

在main.js中引入swiper的css文件

把圖片複製到home目錄下，然後創建slider.vue，這是首頁中的slider組件

<template>
    <div class="slider-wrapper">
        <!-- 分開傳才能分開校驗，因此不直接傳入對象 -->
        <MeSlider 
            :direction="direction"
            :loop="loop"
            :interval="interval"
            :pagination="pagination"
            v-if="sliders.length"
        >
            <swiper-slide v-for="(item,index) in sliders" :key="index">
                <a :href="item.linkUrl" class="slider-link">
                    <img :src="item.picUrl" class="slider-img">
                </a>
            </swiper-slide>
        </MeSlider>
    </div>
</template>

<script>
import MeSlider from 'base/slider';
import { SwiperSlide } from 'vue-awesome-swiper';
import { sliderOptions } from './config';
import { getHomeSliders } from 'api/home';

export default {
   name:"HomeSlider",
   components:{
       MeSlider,
       SwiperSlide
   },
    data(){
        return{
            direction:sliderOptions.direction,
            loop:sliderOptions.loop,
            interval:sliderOptions.interval,
            pagination:sliderOptions.pagination,
            sliders:[],//這是從伺服器讀取
            //這是靜態寫入
            // sliders:[
            //     {
            //        linkUrl:'www.baidu.com',
            //        picUrl:require('./1.jpg') //js中本地圖片引入必須加require
            //     },
            //     {
            //        linkUrl:'www.baidu.com',
            //        picUrl:require('./2.jpg') 
            //     },
            //     {
            //        linkUrl:'www.baidu.com',
            //        picUrl:require('./3.jpg') 
            //     },
            //     {
            //        linkUrl:'www.baidu.com',
            //        picUrl:require('./4.jpg') 
            //     }
            // ]
        }
    },
    created(){
        //一般在created里獲取遠程數據
        this.getSliders();
        
        
    },
    methods:{
        getSliders(){
            getHomeSliders().then(data=>{
                console.log(data);
                this.sliders=data;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線，否則會報錯
    @import "~assets/scss/mixins";
    .slider-wrapper{
        width:100%;
        height:183px;
    }
    .slider-link{
        display:block;
    }
    .slider-link,
    .slider-img{
        width:100%;
        height:100%;
    }
    
</style>

修改home目錄下的index.vue，現在首頁已經引入了頭部，輪播圖，底部，返回箭頭

<template>
    <div class="home">
        <header class="g-header-container">
            <!-- 沒有內容自閉合即可-->
            <HomeHeader/>
        </header> 
        <div>
            <HomeSlider></HomeSlider>
        </div>
        <div class="g-backup-container"></div>
        <!-- 當前頁面存在二級頁面時需要使用router-view -->
        <router-view></router-view>
    </div>
</template>

<script>
import HomeHeader from './header';
import HomeSlider from './slider';

export default {
    name:"Home",
    components:{
        HomeHeader,
        HomeSlider
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪線，否則會報錯
    @import "~assets/scss/mixins";
    .home{
        overflow:hidden;
        width:100%;
        height:100%;
        background:$bgc-theme;
    }
</style>

在home目錄下新建config.js，配置首頁中的輪播圖的配置參數

//暴露一個常量
export const sliderOptions={
    direction:"horizontal",
    loop:"loop",
    interval:1000,
    pagination:"pagination"
}

修改下_container.scss，增加一些樣式

@import "mixins";

.g-container{
    position: relative;
    width:100%;
    height:100%;
    max-width:640px;
    min-width:320px;
    margin:0 auto;
    overflow:hidden;
}
.g-view-container{
    height:100%;
    padding-bottom:$tabbar-height; // 註意移動端在reset文件里要設置box-sizing:border-box
}
.g-header-container{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:$navbar-z-index;
}
.g-footer-container{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
    z-index:$tabbar-z-index;
}
.g-backup-container{
    position: absolute;
    z-index:$backtop-z-index;
    right:10px;
    bottom:$tabbar-z-index+10px;
}

index.scss里的代碼：

@charset "UTF-8";

@import "reset";
@import "base";
@import "icons"; // 引入時不需要寫_icons.scss
@import "containers";
@import "tabbar";

成功獲取輪播圖時的效果

獲取輪播圖失敗的效果圖