大概步骤:
目标效果
六、下拉刷新
- 要点:
- 添加滚动公共组件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来操作异步数据
- 判断歌曲有没有更多搜索结果
- 把再次获取的搜索结果存为歌曲数组变量(上一篇设置了监听)
- 输入框的值获取数据要重置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