vue慕课网音乐项目手记：52-搜索列表scroll的实现以及scroll底部距离的刷新

Posted 2020-11-17 catbrother

     首先引入scroll组件，然后使用：

<scroll class="shortcut" :data="shortcut" ref="shortcut">

     这里的data是computed计算的来的，因为scroll里面有两组数据：

    shortcut () {
      return this.hotKey.concat(this.searchHistory)
      // 当hotKey和History有一个发生变化的时候。computed就会重新计算。
    }

　　而当query从有到无的时候，scroll不能自动刷新。所以需要做一点优化：

watch: {
    query (newQuery) {
      if (!newQuery) {
        // 当query从有到无的时候，手动刷新以下scroll
        setTimeout(() => {
          this.$refs.shortcut.refresh()
        })
      }
    }
  }

　　底部距离的刷新

import { playListMixin } from ‘common/js/mixin‘

mixins: [playListMixin],

handlePlayList (playList) {
      const bottom = this.playList.length > 0 ? ‘60px‘ : 0
      this.$refs.shortcutWrapper.style.bottom = bottom
      this.$refs.shortcut.refresh()
      this.$refs.searchResult.style.bottom = bottom
      this.$refs.suggest.refresh()
    },