Vue音乐--搜索页面05_搜索结果列表布局

最新推荐文章于 2022-12-14 14:55:18 发布

「已注销」

最新推荐文章于 2022-12-14 14:55:18 发布

阅读量342

点赞数

分类专栏：移动端音乐项目文章标签： vue dom

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/83011514

版权

移动端音乐项目专栏收录该内容

21 篇文章

订阅专栏

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

五、搜索结果列表布局

要点：
- 根据li的歌手type，来渲染相应的值

↓suggest.vue

<ul>
      <li v-for="(item,index) of result">
        <i class="iconfont " :class="_otherIcon(item)">
          <img 
            v-if="item.type ==='singer'" 
            width="40" 
            height="40" 
            :src="_getSingerImg(item)"/>
        </i>
        <div class="search-suggest_text">
          <h3>{{resultTitle(item)}}</h3>
          <p>{{resultDics(item)}}</p>
        </div>
      </li>
</ul>

//li的标题文字
	resultTitle(item){
      //当数据是歌手的时候展示歌手数据
      if(item.type===TYPE_SINGER){
        return item.singername
      }else{
        return item.name
      }
    },
//li的描述文字
    resultDics(item){
      //同理
      if(item.type===TYPE_SINGER){
        return item.songnum
      }else{
        return item.singer
      }
    },
//li的图标判断是iconfont还是歌手头像
    _otherIcon(item){
      if(item.type===TYPE_SINGER){
        return 'search-suggest_img'
      }else{
        return 'icon-yinyue search-suggest_icon'
      }
    },
    //判断获取歌手图片
    _getSingerImg(item){
      return `https://y.gtimg.cn/music/photo_new/T001R68x68M000${item.singmid}.jpg?max_age=2592000`
    },
}

.search-suggest{
    position: absolute;
    top: 60px;
    width: 100%;
    bottom: 0;
    overflow: hidden;
  }
  .search-suggest ul li{
    position: relative;
    display: flex;
    height: 55px;
  }
  .search-suggest ul li i{
    flex: 0 0 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .search-suggest_img{
    width: 40px;
    height: 40px;
  }
  .search-suggest_text{
    flex: 1;
    box-sizing: border-box;
  }