2回答

好帮手慕久久

2020-12-18

同学你好，图标轮播图不显示的问题，已经在另一个问题中回复了，请查看：https://class.imooc.com/course/qadetail/269997

而Recommend.vue不显示，是因为数据绑定时，单词写错了，如下：

可做如下调整：

祝学习愉快！

0

hyperse

提问者

2020-12-18

Recommend.vue也没有显示，但是weekend显示了，这是为什么，代码如下：

home.vue

<template>

  <div>

    <home-header :city="city"></home-header>

    <home-swiper :list="swiperList"></home-swiper>

    <home-icons :list="iconList"></home-icons>

    <home-recommend :list="recommentList"></home-recommend>

    <home-weekend :list="weekendList"></home-weekend>

  </div>

</template>

<script>

  import HomeHeader from './components/Header'

  import HomeSwiper from './components/Swiper'

  import HomeIcons from './components/Icons'

  import HomeRecommend from './components/Recommend'

  import HomeWeekend from './components/Weekend'

  import axios from 'axios'

  export default{

    name: 'Home',

    components:{

      HomeHeader,

      HomeSwiper,

      HomeIcons,

      HomeRecommend,

      HomeWeekend

    },

    data () {

      return{

        city: '',

        swiperList: [],

        iconList: [],

        recommentList: [],

        weekendList: []

      }

    },

    methods: {

      getHomeInfo(){

        axios.get('/api/index.json')

          .then(this.getHomeInfoSucc)

      },

      getHomeInfoSucc(res){

        res = res.data

        if (res.ret && res.data) {

          const data = res.data

          this.city = data.city

          this.swiperList = data.swiperList

          this.iconList = data.iconList

          this.recommendList = data.recommendList

          this.weekendList = data.weekendList

        }

        console.log(res)

      }

    },

    mounted(){

      //页面挂载好之后去执行getHomeInfo()这个函数

      this.getHomeInfo()

    }

  }

</script>

<style>

</style>

icons.vue

<template>

  <div class="icons"  >

    <swiper :options="swiperOption">

      <!-- 这里的pages对应计算属性，pages中有两项，所以会生成两个swiper-slide，也就是两页 -->

      <swiper-slide v-for="(page,index) of pages" :key="index">

      <!-- <swiper-slide> -->

        <!-- 内层for循环就是针对pages中每一项进行遍历，生成每一页的内容 -->

        <div class="icon" v-for="item of page" :key="item.id">

        <!-- <div class="icon" v-for="item of iconList"> -->

          <div class="icon-img">

            <img class="icon-img-content" :src=item.imgUrl />

          </div>

          <p class="icon-desc">{{item.desc}}</p>

        </div>

      </swiper-slide>

    </swiper>

  </div>

</template>

<script>

  export default{

    name: 'HomeIcons',

    props:{

      list: Array

    },

    data(){

      return {

        swiperOption: {

          autoplay: false

        }

      }

    },

    computed: {

      pages () {   //计算属性，名为pages，需跟v-for中的变量保持一致

        const pages = []  //自定义常量，名为pages,用来保存遍历后的值

        this.list.forEach((item,index) => {

          //index是从0开始的，直到8，那么index/8，然后再取整，值为8个0和1个1，所以index的值只有0和1

          const page = Math.floor(index / 8)

          //判断pages[0]，pages[1]是否有值，没有值就是初始化为空，所以就有了空数组

          if (!pages[pages]) {

            pages[pages] = []

          }

          //在pages[0]和pages[1]数组中添加内容

          pages[pages].push(item)

        })

        console.log(pages)

        return pages  //return pages返回的就是计算属性pages()最终的值

      }

    }

  }

</script>

<style scoped>

  //@import '~styles/varibles.styl'

  // @import '~styles/mixins.styl'

  .icons >>> .swiper-container

    height: 0

    padding-bottom: 50%

  .icon

    position: relative

    overflow: hidden

    float: left

    width: 25%

    height: 0

    padding-bottom: 25%

    //background: pink

    .icon-img

      position:absolute

      top: 0

      left: 0

      right: 0

      bottom: .44rem

      box-sizing: border-box

      padding: .1rem

      //background: skyblue

      .icon-img-content

        display: block

        margin: 0 auto

        height: 100%

     .icon-desc

        position:absolute

        left: 0

        right: 0

        bottom: 0

        height: .44rem

        line-height: .44rem

        text-align: center

        color: $darkTextColor

        overflow: hidden

        white-space: nowrap

        text-overflow: ellipsis

        // ellipsis()

</style>

recommend.vue

<template>

  <div>

    <div class="recommend-title">热销推荐</div>

    <ul>

      <li class="item border-bottom"

          v-for="item of list"

          :key="item.id"

      >

        <img class="item-img" :src="item.imgUrl" />

        <div class="item-info">

          <p class="item-title">{{item.title}}</p>

          <p class="item-desc">{{item.desc}}</p>

          <button class="item-button">查看详情</button>

        </div>

      </li>

    </ul>

  </div>

</template>

<script>

  export default{

    name: 'HomeRecommend',

    props:{

      list: Array

    }

  }

</script>

<style scoped>

  //@import '~styles/mixins.styl';

  .recommend-title

    margin-top: .2rem

    line-height: .8rem

    background: #eee

    text-indent: .2rem

  .item

    overflow: hidden

    display: flex

    height: 1.9rem

    .item-img

      width: 1.7rem

      height: 1.7rem

      padding: .1rem

    .item-info

      flex: 1 //自动撑开屏幕宽度

      padding: .1rem

      min-width: 0

      .item-title

        line-height: .54rem

        font-size: .32rem

        //ellipsis()

        overflow: hidden

        white-space: nowrap

        text-overflow: ellipsis

      .item-desc

        line-height: .4rem

        color: #ccc

        //ellipsis()

        overflow: hidden

        white-space: nowrap

        text-overflow: ellipsis

      .item-button

        line-height: .44rem

        margin-top: .16rem

        background: #ff9300

        padding: 0 .2rem

        border-radius: .06rem

        color: #fff

</style>

0