vue慕课网音乐项目手记：47-搜索页面边界情况的处理

当没有搜索结果的时候。添加一个图片

新建一个组件，样式布局如下：

<template>
  <div class="no-result">
    <div class="no-result-icon"></div>
    <p class="no-result-text">{{title}}</p>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    default: ''
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .no-result
    text-align center
    .no-result-icon
      width 86px
      height 90px
      margin 0 auto
      bg-image('no-result')
      background-size 86px 90px
    .no-result-text
      margin-top 30px
      font-size $font-size-medium
      color $color-text-d
</style>

在组件使用如下：

<div class="no-result-wrapper">
      <no-result v-show="!hasMore && !result.length"></no-result>
    </div>

css如下：主要样wrapper居中：

.no-result-wrapper
        position absolute
        width 100%
        top 50%
        transform translateY(-50%)

每一次输入和删除字符，都会发一次请求，input的节流

创建一个公共的节流函数：

export function debounce (func, delay) {
  // 调用debunce函数，里面有一个函数
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    // 如果外部的函数反复被执行。delay了内部的func的函数，达到函数截留的作用
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

注意：这里的function（…arg）的含义需要自己再去看看

使用如下：

created () {
    this.$watch('query', debounce((newQuery) => {
        this.$emit('query', newQuery)
      }, 200)
    )
  }

滚动列表的时候，收起键盘

首先：对scroll组件进行扩展
接收一个beforeScroll的参数

beforeScroll: {
      type: Boolean,
      default: false
    }

初始化的时候监控scroll的beforeScrollStart的事件，向外传递一个beforeScroll的事件。

if (this.beforeScroll) {
        this.scroll.on('beforeScrollStart', () => {
          this.$emit('beforeScroll')
        })
      }

suggest里面向组件发送一个参数beforeScroll为true，并监控传递的事件：

:beforeScroll="beforeScroll"
@beforeScroll="listScroll"

再把这个向外部传递，传递给search组件：

listScroll () {
      this.$emit('listScroll')
    },

search组件里面去改变blur的状态：

<suggest :query="query" @listScroll="blurInput"></suggest>

blurInput () {
      this.$refs.searchBox.blur()
    },

这里改变的是 search-box组件里面input的focus的状态：

<input ref="query" class="box" v-model="query" :placeholder="placeholder"/>

blur () {
      this.$refs.query.blur()
    }

到这里就已经实现了。