back-top.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view v-if="scrollTop>400" class="backTop" :class="{'mescroll-fade-in':isShowToTop}" @click="toTopClick">
  3. <image :src="src" mode="widthFix" />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: "backTop",
  9. props: {
  10. src: {
  11. type: String,
  12. default: ''
  13. },
  14. id: {
  15. type: String,
  16. default: ''
  17. },
  18. scrollTop: {
  19. type: Number,
  20. default: 0
  21. },
  22. tab: {
  23. type: Boolean,
  24. default: false
  25. }
  26. },
  27. data() {
  28. return {
  29. isShowToTop: true
  30. }
  31. },
  32. methods: {
  33. toTopClick() {
  34. this.isShowToTop = false; // 回到顶部按钮需要先隐藏,再执行回到顶部,避免闪动
  35. if (this.tab) {
  36. this.$emit('setScrollTop');
  37. } else {
  38. uni.pageScrollTo({
  39. scrollTop: 0,
  40. duration: 300
  41. });
  42. }
  43. }
  44. },
  45. }
  46. </script>
  47. <style>
  48. .mescroll-lazy-in,
  49. .mescroll-fade-in {
  50. -webkit-animation: mescrollFadeIn .3s linear forwards;
  51. animation: mescrollFadeIn .3s linear forwards;
  52. }
  53. .backTop {
  54. z-index: 999;
  55. position: fixed;
  56. right: 20rpx;
  57. bottom: 120rpx;
  58. /* #ifdef H5 */
  59. bottom: 220rpx;
  60. /* #endif */
  61. width: 72rpx;
  62. height: 72rpx;
  63. border-radius: 50%;
  64. transform: translateZ(0);
  65. -webkit-transform: translateZ(0);
  66. }
  67. .backTop image {
  68. width: 100%;
  69. height: 100%;
  70. }
  71. </style>