有问题不明白
来源：7-1 返回顶部组件
soso_crazy
2019-08-06 18:08:55
&-enter-active, &-leave-active，&-enter, &-leave-to这些类是vue组件自带的吗？可以详细讲解一下吗？ this.isBacktopVisible = translate < 0 && -translate > scroll.height;这句判断条件应该怎样理解？向下拉的距离大于swiper容器的高度而且是向下拉判断为true，不理解为什么要这样做？ 回到顶部图标出现的判断条件不理解 this.$refs.scroll.scrollToTop()中的scrollTop方法是scroll\index.vue中定义，在父组件调用时只需要.方法名（）吗？
1回答
-
好帮手慕夭夭
2019-08-06
你好同学，解答如下：
1.这些是vue中规定的过渡效果，直接使用即可。参考如下进行理解：
（前面的v是可以任意定义的名称）
（1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
（2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
（3）v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
（4）v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
（5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
（6）v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
2. 在课程中老师有讲过，当往下滚动的时候translate小于0，下拉的时候是大于0。这里要实现的效果是往下滚动一屏的距离就让返回顶部图标显示。即true的时候显示，那么它需要满足两个条件。
即translate < 0 表示现在的状态是往下滚动,此时返回true。
translate小于0是负值，所以判断滚动的距离是否等于可视区域的距离，需要加一个负号把它转换为正值（这就是数学的思维，一个正值加负号表示负值，一个负值再加负号表示正值。）
即-translate > scroll.height判断当前滚动的距离大于可视区域，说明已经滚动了一个屏幕的距离了，此时返回的就是true。当两个条件同时满足的时候，图标就显示了哦。
3.父组件如果直接调用子组件的方法是不可以调用的，视频中能够调用是因为使用了this.$refs。this.$refs表示的就是子组件的实例，所以按照课程中的写法，通过ref可以直接调用子组件的方法哦。
祝学习愉快，望采纳。
1
相似问题