码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-06-13 20:58:55      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:set   list   put   script   ons   his   comm   一个   手动   

     首先引入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()
    },

  

 

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

标签:set   list   put   script   ons   his   comm   一个   手动   

原文地址:https://www.cnblogs.com/catbrother/p/9179445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!