u-back-top.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <u-transition
  3. mode="fade"
  4. :customStyle="backTopStyle"
  5. :show="show"
  6. >
  7. <view
  8. class="u-back-top"
  9. :style="[contentStyle]"
  10. v-if="!$slots.default && !$slots.$default"
  11. @click="backToTop"
  12. >
  13. <u-icon
  14. :name="icon"
  15. :custom-style="iconStyle"
  16. ></u-icon>
  17. <text
  18. v-if="text"
  19. class="u-back-top__text"
  20. >{{text}}</text>
  21. </view>
  22. <slot v-else />
  23. </u-transition>
  24. </template>
  25. <script>
  26. import props from './props.js';
  27. // #ifdef APP-NVUE
  28. const dom = weex.requireModule('dom')
  29. // #endif
  30. /**
  31. * backTop 返回顶部
  32. * @description 本组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。
  33. * @tutorial https://uviewui.com/components/backTop.html
  34. *
  35. * @property {String} mode 返回顶部的形状,circle-圆形,square-方形 (默认 'circle' )
  36. * @property {String} icon 自定义图标 (默认 'arrow-upward' ) 见官方文档示例
  37. * @property {String} text 提示文字
  38. * @property {String | Number} duration 返回顶部滚动时间 (默认 100)
  39. * @property {String | Number} scrollTop 滚动距离 (默认 0 )
  40. * @property {String | Number} top 距离顶部多少距离显示,单位px (默认 400 )
  41. * @property {String | Number} bottom 返回顶部按钮到底部的距离,单位px (默认 100 )
  42. * @property {String | Number} right 返回顶部按钮到右边的距离,单位px (默认 20 )
  43. * @property {String | Number} zIndex 层级 (默认 9 )
  44. * @property {Object<Object>} iconStyle 图标的样式,对象形式 (默认 {color: '#909399',fontSize: '19px'})
  45. * @property {Object} customStyle 定义需要用到的外部样式
  46. *
  47. * @example <u-back-top :scrollTop="scrollTop"></u-back-top>
  48. */
  49. export default {
  50. name: 'u-back-top',
  51. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  52. computed: {
  53. backTopStyle() {
  54. // 动画组件样式
  55. const style = {
  56. bottom: uni.$u.addUnit(this.bottom),
  57. right: uni.$u.addUnit(this.right),
  58. width: '40px',
  59. height: '40px',
  60. position: 'fixed',
  61. zIndex: 10,
  62. }
  63. return style
  64. },
  65. show() {
  66. return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top)
  67. },
  68. contentStyle() {
  69. const style = {}
  70. let radius = 0
  71. // 是否圆形
  72. if(this.mode === 'circle') {
  73. radius = '100px'
  74. } else {
  75. radius = '4px'
  76. }
  77. // 为了兼容安卓nvue,只能这么分开写
  78. style.borderTopLeftRadius = radius
  79. style.borderTopRightRadius = radius
  80. style.borderBottomLeftRadius = radius
  81. style.borderBottomRightRadius = radius
  82. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  83. }
  84. },
  85. methods: {
  86. backToTop() {
  87. // #ifdef APP-NVUE
  88. if (!this.$parent.$refs['u-back-top']) {
  89. uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`)
  90. }
  91. dom.scrollToElement(this.$parent.$refs['u-back-top'], {
  92. offset: 0
  93. })
  94. // #endif
  95. // #ifndef APP-NVUE
  96. uni.pageScrollTo({
  97. scrollTop: 0,
  98. duration: this.duration
  99. });
  100. // #endif
  101. this.$emit('click')
  102. }
  103. }
  104. }
  105. </script>
  106. <style lang="scss" scoped>
  107. @import '../../libs/css/components.scss';
  108. $u-back-top-flex:1 !default;
  109. $u-back-top-height:100% !default;
  110. $u-back-top-background-color:#E1E1E1 !default;
  111. $u-back-top-tips-font-size:12px !default;
  112. .u-back-top {
  113. @include flex;
  114. flex-direction: column;
  115. align-items: center;
  116. flex:$u-back-top-flex;
  117. height: $u-back-top-height;
  118. justify-content: center;
  119. background-color: $u-back-top-background-color;
  120. &__tips {
  121. font-size:$u-back-top-tips-font-size;
  122. transform: scale(0.8);
  123. }
  124. }
  125. </style>