接上篇 https://www.cnblogs.com/chenyingying0/p/12609330.html
首先说下格式化的问题：
vscode可以安装Vetur插件
安装之后重启编辑器，鼠标右键，有一个格式化代码选项，点击即可
首先放出文件路径，先让小伙伴们熟悉下结构
Navbar 组件：
在base目录下创建navbar目录，里面创建index.vue
<div class="mine-navbar-left" v-if="$slots.left"><div class="mine-navbar-center" v-if="$slots.center">
<div class="mine-navbar-right" v-if="$slots.right"><h1 class="mine-navbar-title" v-if="title">
首页home目录下的header.vue
搜索框import MeNavbar from 'base/navbar';
export default {
name:"HomeHeader",
components:{
MeNavbar
}
}" _ue_custom_node_="true">// 引入前面需要加波浪线，否则会报错@import "~assets/scss/mixins";
.header{&.mine-navbar{
background:transparent;
}
.iconfont{
font-size:$icon-font-size;
color:$icon-color-default;
}
}
" _ue_custom_node_="true">在_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';//获取幻灯片数据 ajaxexport 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组件样式（可多个项目通用）
<div class="swiper-pagination" v-if="pagination" slot="pagination">
在main.js中引入swiper的css文件
把图片复制到home目录下，然后创建slider.vue，这是首页中的slider组件
<MeSlider
:direction="direction":loop="loop":interval="interval":pagination="pagination"v-if="sliders.length"
><swiper-slide v-for="(item,index) in sliders" :key="index">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;
});
}
}
}" _ue_custom_node_="true">// 引入前面需要加波浪线，否则会报错@import "~assets/scss/mixins";
.slider-wrapper{
width:100%;
height:183px;
}
.slider-link{
display:block;
}
.slider-link,
.slider-img{
width:100%;
height:100%;
}
" _ue_custom_node_="true">
修改home目录下的index.vue，现在首页已经引入了头部，轮播图，底部，返回箭头
import HomeHeader from './header';
import HomeSlider from './slider';
export default {
name:"Home",
components:{
HomeHeader,
HomeSlider
}
}" _ue_custom_node_="true">// 引入前面需要加波浪线，否则会报错@import "~assets/scss/mixins";
.home{
overflow:hidden;
width:100%;
height:100%;
background:$bgc-theme;
}" _ue_custom_node_="true">
在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";
成功获取轮播图时的效果
获取轮播图失败的效果图
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
