content内容加载不出来怎么回事？
来源：1-2 内容组件--数据获取和显示
琥珀_2020
2020-04-11 20:22:17
content.vue
<template>
<div class="content-wrapper">
<div class="loading-container" v-if="isLoading">
<!-- <me-loading /> -->
<div class="loading-wrapper">
<me-loading />
</div>
</div>
<me-scroll ref="scroll">
<div class="content">
<!-- banner -->
<div class="pic" v-if="content.banner">
<a :href="content.banner.linkUrl" class="pic-link">
<img @load="updateScroll" :src="content.banner.picUrl" alt="" class="pic-img" />
</a>
</div>
<div
class="section"
v-for="(section, index) in content.data" :key="index"
>
<h4 class="section-title">{{section.name}}</h4>
<ul class="section-list">
<!-- 循环列表内容 -->
<li
class="section-item"
v-for="(item, i) in content.itemList" :key="i"
>
<a :href="item.linkUrl" class="section-link">
<p class="section-pic" v-if="item.picUrl">
<!-- v-lazy图片懒加载 -->
<img v-lazy="item.picUrl" alt="" class="section-img" />
</p>
<p class="section-name">{{item.name}}</p>
</a>
</li>
</ul>
</div>
</div>
</me-scroll>
<div class="g-backtop-container">
<!-- :visible是动态的需要加冒号 -->
<me-backtop @backtop="backToTop" :visible="isBacktopVisible" />
</div>
</div>
</template>
<script>
// 接口: www.imooc.com/api/category/content/id(这里是id) 具体在category.js
import MeLoading from 'base/loading';
import MeScroll from 'base/scroll';
import MeBacktop from 'base/backtop';
// import {categoryNames} from './config';
import { getCategoryContent } from 'api/category';
// console.log(getCategoryContent);
export default {
name: 'CategoryContent',
components: {
MeLoading,
MeScroll,
MeBacktop
},
props: {
curId: {
type: String,
default: ''
}
},
data() {
return {
content: {},
isBacktopVisible: false,
isLoading: false
};
},
watch: {
curId(id) {
this.isLoading = true;
this.getContent(id);
// console.log(getContent);
}
},
methods: {
// 获取content数据,然后填充html结构
getContent(id) {
// 成功then
return getCategoryContent(id).then(data => {
if (data) {
this.content = data;
}
});
},
// 返回顶部
backToTop() {
this.$refs.scroll && this.$refs.scroll.scrollToTop();
},
updateScroll() {
this.$refs.scroll && this.$refs.scroll.update();
}
}
};
</script>
<style lang='scss' scoped>
@import '~assets/scss/mixins';
.content-wrapper {
position: relative;
height: 100%;
}
.loading-container {
position: absolute;
top: 0;
left: 0;
z-index: $category-popup-z-index;
@include flex-center();
width: 100%;
height: 100%;
/*background-color: $modal-bgc;*/
.mine-loading {
color: #fff;
font-size: 14px;
}
}
.loading-wrapper {
width: 50%;
padding: 30px 0;
background-color: $modal-bgc;
border-radius: 4px;
}
.content {
padding: 10px;
}
.pic {
margin-bottom: 12px;
&-link {
display: block;
}
&-img {
width: 100%;
}
}
.section {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
&-title {
height: 28px;
line-height: 28px;
color: #080808;
font-weight: bold;
}
&-list {
display: flex;
flex-wrap: wrap;
background-color: #fff;
padding: 10px 10px 0;
}
&-item {
width: (100% / 3);
}
&-link {
display: block;
}
&-pic {
position: relative;
width: 80%;
padding-bottom: 80%;
margin: 0 auto;
}
&-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-name {
height: 36px;
line-height: 36px;
text-align: center;
@include ellipsis();
}
}
.g-backtop-container {
bottom: 10px;
}
</style> 
为什么老是的就能正常加载出来？
我的哪里出问题了？ 跟着老是来敲的 之前报id的错 我看了问答区同学的类似的问题 加了 return 解决了id的报错 不过还是 加载不出来内容。。。为什么老师的不用加就能正常运行
我这样 应该怎么解决
写回答
7回答
-
同学你好，自己能够发现问题并解决是很棒的哦，在学习过程中不要着急，细心一些，跟着老师一步一步的实现就好。
祝学习愉快！
0 -
琥珀_2020
提问者
2020-04-11
没问题了 解决了 写前端代码真是得细心才行 。。。有时候哪里写错了 也不报错 得自己去找问题解决
0 -
琥珀_2020
提问者
2020-04-11
哇 好坑啊 ????? 解决了
我的是给main父容器添加display flex 。。。。
好吧 老师他是写别的地方去了 是吗？
好像老师是在_containers.scss中 写了
.g-content-container {
height: 100%;
padding-top: $navbar-height;
} 这个
0 -
琥珀_2020
提问者
2020-04-11
求救啊 老师！！！
太难了 太奇怪了 为啥跟着老师写 还莫名其妙出问题
实在是不知道哪里出问题了！！！
你看 为啥 .main 显示在下面 而不是 tab 旁边
0 -
琥珀_2020
提问者
2020-04-11
loading 加载组件 也是没反应的
0 -
琥珀_2020
提问者
2020-04-11
header.vue
<template> <!-- 引入基础组件 --> <me-navbar class="header"> <div slot="center">搜索框</div> <i class="iconfont icon-msg" slot="right"></i> </me-navbar> </template> <script> import MeNavbar from 'base/navbar'; export default { name: 'CategoryHeader', components: { MeNavbar } } </script> <style lang='scss' scoped> @import "~assets/scss/mixins"; .header { &.mine-navbar { width: 100%; background-color: $header-bgc-translucent; } .iconfont { color: $icon-color-default; font-size: $icon-font-size; } } </style>0 -
琥珀_2020
提问者
2020-04-11
index.vue
<template> <div class="category"> <header class="g-header-container"> <category-header/> </header> <div class="g-content-container"> <div class="sidebar"> <category-tab @switch-tab="getCurrentId"/> </div> <div class="main"> <!-- tab和cont是兄弟组件 不可以直接通信 这里把tab里的id传入父组件index这,然后再传给子组件content --> <category-content :curId="curId"/> </div> </div> </div> </template> <script> import CategoryHeader from './header'; import CategoryTab from './tab'; import CategoryContent from './content'; export default { name: 'Category', components: { CategoryHeader, CategoryTab, CategoryContent }, data() { return { curId: '' } }, methods: { getCurrentId(id) { this.curId = id; } }, } </script> <style lang="scss" scoped> @import "~assets/scss/mixins"; .category { overflow: hidden; width: 100%; height: 100%; background-color: $bgc-theme; } .g-header-container { display: flex; } // 这样左边tab滚动条才可以滚动 .g-content-container { height: 100%; } .sidebar { width: 80px; height: 100%; } .main { flex: 1; height: 100%; } </style>tab.vue
<template> <!-- me-scroll 传参 传的不是字符串一定要加冒号 --> <me-scroll :scrollbar="false"> <ul class="tab"> <!-- li有很多需要v-for来循环 index是为key准备的 然后在写li里面的内容 tab-item-active当前li变成红色激活状态 --> <li class="tab-item" :class="{ 'tab-item-active': item.id === curId }" v-for="(item, index) in items" :key="index" @click="switchTab(item.id)" > <!-- tab和content是兄弟组件 name用在tab id用content 没办法直接通信 需要把id先传出去 --> {{ item.name }} </li> </ul> </me-scroll> </template> <script> // 引入组件 数据 import MeScroll from 'base/scroll'; import { categoryNames } from './config'; export default { name: 'CategoryTab', components: { MeScroll }, data() { return { curId: '' }; }, created() { this.init(); // 默认是点击之后触发 但是进来就默认被点中一个li的激活状态 this.switchTab(this.items[0].id); }, methods: { init() { // 有了tab数据之后 填充html this.items = categoryNames; }, // 当点击tab的item时,会传一个id进来 switchTab(id) { // 先判断 如果等于当前id说明 此时点在当前item上 if (this.curId === id) { return; } this.curId = id; // 等于当前itemId,往外触发事件,把id传出去 this.$emit('switch-tab', id); } } }; </script> <style lang='scss' scoped> @import '~assets/scss/mixins'; $tab-item-height: 46px; .tab { width: 100%; margin-top: 50px; &-item { height: $tab-item-height; border-right: 1px solid $border-color; border-bottom: 1px solid $border-color; font-size: $font-size-l; font-weight: bold; text-align: center; line-height: $tab-item-height; @include ellipsis(); color: #080808; background-color: #fff; &:last-child { border-bottom: none; } } &-item-active { background: none; border-right: none; color: #f23030; } } </style>0
相似问题