江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

129 lines
3.7 KiB

1 year ago
  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>