vue路由切换的动画有空白时间段,这个时间段怎么去掉啊?

路由切换时加了slide-up的动画,但是要等当前页面滑出屏幕的时候,下个页面才会开始滑进来,中间出现很长的空白期,请问这个要怎么改啊, 已经加了 mode=’out-in’

这个是部分代码

beforeRouteUpdate: function (to, from, next) {
    // 如果isBack为true时,证明是用户点击了回退,执行slide-down动画
    let isBack = this.$router.isBack
    if (this.isformRules) {
      this.transitionName = 'fade'
    } else {
      if (isBack) {
        this.transitionName = 'slide-down'
      } else {
        this.transitionName = 'slide-up'
      }
    }
    // 做完回退动画后,要设置成前进动画,否则下次打开页面动画将还是回退
    this.$router.isBack = false
    this.isformRules = false
    next()
  }

回答:

你这空白是因为底层是空白吧。而且你的路由切换,是怎么切的,当前页面为什么要滑出屏幕?为什么不能下个页面直接滑进来?你是不是组件的切换?

如果路由切换,不妨在底层,或者

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

写 loading

回答:

不知道你说的情况实在怎么样的情况,不过vux的loading的思路还是值得推荐的。
下面照搬原文的:https://vux.li/#/zh-CN/README…页面切换显示loading
移动端如果使用异步组件加载那么还是需要一点等待时间的,在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。

如果你使用vue-router和vuex,那么可以很容易实现。

首先,注册一个module来保存状态

const store = new Vuex.Store({}) // 这里你可能已经有其他 module

store.registerModule(‘vux’, { // 名字自己定义
state: {

isLoading: false

},
mutations: {

updateLoadingStatus (state, payload) {
  state.isLoading = payload.isLoading
}

}
})
然后使用vue-router的beforeEach和afterEach来更改loading状态

router.beforeEach(function (to, from, next) {
store.commit(‘updateLoadingStatus’, {isLoading: true})
next()
})

router.afterEach(function (to) {
store.commit(‘updateLoadingStatus’, {isLoading: false})
})
在App.vue里使用loading组件并从vuex获取isLoading状态

<loading v-model=”isLoading”></loading>
import { Loading } from ‘vux’
import { mapState } from ‘vuex’

export default {
components: {

Loading

},
computed: {

...mapState({
  isLoading: state => state.vux.isLoading
})

}
}

回答:

参考
https://segmentfault.com/q/10…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注