在mpvue小程序开发中,遇到一个问题,页面在数据返回之前就进行了渲染,等异步数据返回之后重新渲染,导致出现页面抖动的情况,如下图:
<template>
<div id="singerDetail-page">
<music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import {getSingerDetail} from 'api/singer'
import MusicList from 'components/music-list/music-list'
export default {
data () {
return {
songs: []
}
},
mounted () {
this.singerID = this.singer.id
this._getSingerDetail()
},
methods: {
_getSingerDetail () {
getSingerDetail(this.singer.id).then((res) => {
this.songs = res.songs
})
}
},
computed: {
title () {
return this.singer.name
},
bgImage () {
return this.singer.avatar
},
...mapGetters([
'singer'
])
},
watch: {
songs () {
return this.songs
}
},
components: {
MusicList
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
#singerDetail-page
color: $color-theme
</style>
在点击上一个歌手后,this.songs
存储了上个歌手的数据,并没有被清空,因此,我们需要在离开页面时,手动清空this.songs
.
onUnload () {
this.songs = [] //清除数据
},
还有一个问题,就是抖动问题。因为数据请求我们是放在页面singerDetail
上,所以在数据返回前,页面已经进行了渲染。
我们把数据请求的放在singer-list
组件,解决了抖动问题。
效果如下: