home下的index.vue

<template>
<div class="home">
<header class="g-header-container">
<home-header></home-header>
</header>
<me-scroll 
:data="recommends"
pullDown
@pull-down="pullToRefresh"
>
<home-slider ref="slider"></home-slider>
<home-nav></home-nav>
<home-recommend @loaded="getRecommends"></home-recommend>
</me-scroll>
<div class="g-backtop-container"></div>
<router-view></router-view>
</div>
</template>

<script>
import HomeHeader from './header';
import HomeSlider from './slider';
import MeScroll from 'base/scroll';
import HomeNav from './nav';
import HomeRecommend from './recommend';
export default{
name:'Home',
components:{
MeScroll,
HomeHeader,
HomeSlider,
HomeNav,
HomeRecommend
},
data(){
return{
recommends:[]
};
},
methods:{
updateScroll(){
},
getRecommends(recommends){
this.recommends = recommends;
},
pullToRefresh(end){//下拉刷新
this.$refs.slider.update().then(end);
// setTimeout(() => {
//     console.log('下拉刷新');
//     end();
// },1000);
}
}
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.home{
overflow: hidden;
width:100%;
height:100%;
background-color:$bgc-theme;
}
</style>

home下的slider.vue

<template>
<!-- 传参 -->
<div class="slider-wrapper">
<!-- 意思是没有数据才懒加载 -->
<me-loading inline v-if="!sliders.length"></me-loading>
<!-- else就直接输出数据-->
<me-slider 
:data="sliders"
:direction="direction"
:loop="loop"
:interval="interval"
:pagination="pagination"
v-else
>
<!-- 这里直接写就会直接写到插槽位置 -->
<swiper-slide 
v-for="(item,index) in sliders"
:key="index"
>
<a :href="item.linkUrl" class="slider-link">
<img :src="item.picUrl" alt class="slider-img" />
</a>
</swiper-slide>
</me-slider>
</div>
</template>

<script>
import MeSlider from "base/slider";

// 业务组件
import { swiperSlide } from "vue-awesome-swiper";

// 配置文件
import { sliderOptions } from "./config";

//用axio插件来引入服务器上的数据，这个是要写的引入文件,不然校验不通过
import {getHomeSlider} from "api/home";

import MeLoading from 'base/loading';

export default {
name: "HomeSlider",
components: {
MeSlider,
MeLoading,
swiperSlide
},
data() {
return {
direction: sliderOptions.direction,
loop: sliderOptions.loop,
interval: sliderOptions.interval,
pagination: sliderOptions.pagination,
sliders: []// 这是空数组的初始值
};
},
created(){////用axio插件，获取远程数据
this.getSliders();//这是自己写的一个函数
},
methods: {//获取数据，然后赋值给sliders

//外部接口API
update(){
return this.getSliders();
},
getSliders(){
return getHomeSlider().then(data =>{
this.sliders = data;
});
}
}
};
</script>

<style lang="scss" scoped>
.slider-wrapper {
height: 183px;
}
.slider-link {
display: block;
}
.slider-link,
.slider-img {
width: 100%;
height: 100%;
}
</style>

base下的slider/index.vue

<template>
<!-- 基础组件第二步，写组件标签，和插槽，还有分页器 -->
<swiper :options="swiperOption" :key="keyId">
<!-- 插槽 -->
<slot></slot>
<!-- 分页器 -->
<div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
</swiper>
</template>

<script>
//基础组件第一部，引入swiper
import { swiper } from "vue-awesome-swiper";
export default {
name: "MeSlider",
components: {
swiper
},
// 接收参数
props: {
// 滑动的方向
direction: {
type: String,
default: "horizontal", //水平
validator(value) {
//验证，value是自己返回来的值，大于-1，就是这个两个值之一
return [
"horizontal",
"vertical"
].indexOf(value) > -1;
}
},
//控制自动轮播和轮播速度
interval: {
type: Number,
default: 3000,
validator(value) {
//验证，值必须大于等于0
return value >= 0;
}
},
//无缝滚动
loop: {
type: Boolean,
default: true
},
//分页器
pagination: {
type: Boolean,
default: true
},
data:{
type:Array,
default(){
return [];
}
}
},
data(){
return{
keyId:Math.random(),
swiperOption:{
watchOverflow:true,//只有1个slide(非loop),swiper会失效且隐藏导航
direction:this.direction,
autoplay:this.interval?{//如果不为真就根本不开启自动轮播
delay:this.interval,
disableOnInteraction:false//一旦用户有交互就停止了自动轮播，false表示不停止
}:false,
slidesPerView:1,//设置slider容器能够同时显示的slider数量
loop:this.loop,//无缝滚动
pagination:{//分页器
el:this.pagination ? '.swiper-pagination' : null
}
}
};
},
//监听
watch:{
data(newData){
if(newData.length === 0){
return;
}
this.keyId = Math.random();
}
}
};
</script>

<style lang="scss" scoped>
.swiper-container{
width:100%;
height:100%;
}
</style>

api下的home.js

import axios from 'axios';
import jsonp from 'assets/js/jsonp';
import {SUCC_CODE,TIMEOUT,HOME_RECOMMEND_PAGE_SIZE,jsonpOptions} from './config';
//获取幻灯片数据--ajax

//打乱数组的顺序
const shuffle = (arr) =>{
const arrLength = arr.length;
let i = arrLength;
let rndNum;//当前的索引

while(i--){
if(i !==(rndNum = Math.floor(Math.random()*arrLength))){
[arr[i],arr[rndNum]] = [arr[rndNum],arr[i]];
}
}

return arr;
};
export const getHomeSlider = () => {
return axios.get('http://www.imooc.com/api/home/slider',{
timeout:TIMEOUT
}).then(res => {
//看看是否成功，成功的CODE数据是等于0
if(res.data.code === SUCC_CODE){
let sliders = res.data.slider;//下拉刷新

const slider = [sliders[Math.floor(Math.random()*sliders.length)]];
sliders = shuffle(sliders.filter(() =>Math.random() >=0.5));//filter会遍历数组每一个值，50%,筛选里面的值，返回的是真就保留假就剔除
if(sliders.length === 0){//万一全被删了，就把一张的赋值给sliders，这就是为什么取一张的原因
sliders = slider;
}

return sliders;
}

// 错误处理
throw new Error('没有成功获取到数据！');
}).catch(err => {//catch可以捕获到所有错误
if(err){
console.log(err);
}
//如果超时错误，或有其他错误，则返回一张图片
return [{
linkUrl:"https://www.imooc.com",
picUrl:require('assets/img/404.png')
}
];//延迟
}).then(data => {
return new Promise(resolve =>{
setTimeout(()=>{
resolve(data)
},1000);
})
});
};

//获取热门的推荐数据--jsonp  page=1是第一页，psize是每页20条
export const getHomeRecommend = (page =1,psize=HOME_RECOMMEND_PAGE_SIZE) =>{
const url = 'https://ju.taobao.com/json/tg/ajaxGetItemsV2.json';
const params = {//参数
page,
psize,
type:0,//默认的
frontCatId:''
};
return jsonp(url,params,jsonpOptions).then(res =>{
if(res.code === '200'){
return res;
}
throw new Error('没有成功获取到数据！');
}).catch(err => {//catch可以捕获到所有错误，如果获取数据成功不会走这一步
if(err){
console.log(err);
}
}).then(data => {//获取数据成功会走这一步，然后会吧44行的res传到data来
return new Promise(resolve =>{
setTimeout(()=>{
resolve(data)
},1000);
})
});
};