Vue音乐--搜索页面06_下拉刷新搜索结果

大概步骤：

目标效果

---

六、下拉刷新

• 要点：
  • 添加滚动公共组件scroll
  • 给滚动组件，添加滚动到底部方法，触发事件
  • 触发获取数据事件，page为++
  • 即：获取搜索结果数据有两种情况
  • 监听到输入框的值改变获取数据，page为1
  • 滚动到底部获取数据，page为++
  • 输入框改变，重置page、滚动位置、hasmore

（一）、添加滚动事件

↓scroll.vue
开启滚动到底部标识flag
派发事件到父组件操作

props:{
	//开启滚动到底部事件，默认false
    pullup:{
      type:Boolean,
      default:false
    },
}
methods:{
	//开启滚动到底部触发事件
      if(this.pullup){
        let me = this
        this.scroll.on('scrollEnd',()=>{
          //当滚动值(上拉手势，是正数)小于scroll的压面y+50时，触发事件
          if(me.scroll.y <= (me.scroll.maxScrollY+50)){
            //箭头函数要把this指向纠正，但是箭头函数内的判断里就不需要纠正了
            me.$emit('scrollToEnd')
          }
        })
      }
}

↓SearchSuggest.vue
传入开启滚动到底部标识flag
执行派发的事件去获取数据，合并在原数据列表中

<scroll 
    :data="query" 
    :pullup="pullup"
    @scrollToEnd="searchMore"
    ref="suggest"
    class="search-suggest"
  >
    <ul>
      <li v-for="(item,index) of result">
      </li>
    </ul>
  </scroll> 

（二）、滚动到底部触发获取数据

因为要对数据进行提取和异步获取歌曲源url
所以还会遇到数据为空的现象，同理
再利用watch和存成data来操作异步数据

1. 判断歌曲有没有更多搜索结果
2. 把再次获取的搜索结果存为歌曲数组变量（上一篇设置了监听）
3. 输入框的值获取数据要重置page页数为1和滚动回顶部

//计算搜索结果总数，判断是否执行获取新数据
    _checkMore(data){
      if(!data.list.length || (data.curnum+data.curpage*perpage) > data.totalnum){
        this.hasMore = false
      }
    },

在数据res.data中有一页多少数据，和当前页数，先page++，相乘即可得到再获取的总数，与真正的总数判断。当大于，则没有这么多数据，把变量置为false

searchMore(){
      //需要判断当前数据是否已经是最新的hasMore,为fasle就不执行
      if(!this.hasMore){
        return 
      }
      this.page++   //获取到下一页的数据
      getSearch(this.query,this.page,this.showSinger,perpage).then((res)=>{
        if(res.code === ERR_OK){
          //把下一页数据，拼接上原页面数据
          this.searchSongs = this._nomalizeSongs(res.data.song.list)
          //判断是否还有新数据
          this._checkMore(res.data.song)
        }
      })
    },

因为已经设置好监听和pushover在异步获取url那里了，所以可以获取，不会出现异步问题。

（三）、输入框的值获取数据要重置page和scroll位置和hasmore

/**获取数据方法*****/
    _getSearch(){
      this.hasMore = true   //默认设置true，然后判断已经是最新的时候置为false
      this.page = 1
      this.$refs.suggest.scrollTo(0,0)
      getSearch(this.query,this.page,this.showSinger,perpage).then((res)=>{
        if(res.code === ERR_OK){
          this.zhida = res.data.zhida
          this.searchSongs = this._nomalizeSongs(res.data.song.list)
          this._checkMore(res.data.song)   //执行判断是否还有数据，计算总数
        }
      })
    },

最后在li后加一个加载中组件

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com