<template> <u-transition mode="fade" :customStyle="backTopStyle" :show="show" > <view class="u-back-top" :style="[contentStyle]" v-if="!$slots.default && !$slots.$default" @click="backToTop" > <u-icon :name="icon" :custom-style="iconStyle" ></u-icon> <text v-if="text" class="u-back-top__text" >{{text}}</text> </view> <slot v-else /> </u-transition> </template> <script> import props from './props.js'; // #ifdef APP-NVUE const dom = weex.requireModule('dom') // #endif /** * backTop 返回顶部 * @description 本组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。 * @tutorial https://uviewui.com/components/backTop.html * * @property {String} mode 返回顶部的形状,circle-圆形,square-方形 (默认 'circle' ) * @property {String} icon 自定义图标 (默认 'arrow-upward' ) 见官方文档示例 * @property {String} text 提示文字 * @property {String | Number} duration 返回顶部滚动时间 (默认 100) * @property {String | Number} scrollTop 滚动距离 (默认 0 ) * @property {String | Number} top 距离顶部多少距离显示,单位px (默认 400 ) * @property {String | Number} bottom 返回顶部按钮到底部的距离,单位px (默认 100 ) * @property {String | Number} right 返回顶部按钮到右边的距离,单位px (默认 20 ) * @property {String | Number} zIndex 层级 (默认 9 ) * @property {Object<Object>} iconStyle 图标的样式,对象形式 (默认 {color: '#909399',fontSize: '19px'}) * @property {Object} customStyle 定义需要用到的外部样式 * * @example <u-back-top :scrollTop="scrollTop"></u-back-top> */ export default { name: 'u-back-top', mixins: [uni.$u.mpMixin, uni.$u.mixin,props], computed: { backTopStyle() { // 动画组件样式 const style = { bottom: uni.$u.addUnit(this.bottom), right: uni.$u.addUnit(this.right), width: '40px', height: '40px', position: 'fixed', zIndex: 10, } return style }, show() { return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top) }, contentStyle() { const style = {} let radius = 0 // 是否圆形 if(this.mode === 'circle') { radius = '100px' } else { radius = '4px' } // 为了兼容安卓nvue,只能这么分开写 style.borderTopLeftRadius = radius style.borderTopRightRadius = radius style.borderBottomLeftRadius = radius style.borderBottomRightRadius = radius return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) } }, methods: { backToTop() { // #ifdef APP-NVUE if (!this.$parent.$refs['u-back-top']) { uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`) } dom.scrollToElement(this.$parent.$refs['u-back-top'], { offset: 0 }) // #endif // #ifndef APP-NVUE uni.pageScrollTo({ scrollTop: 0, duration: this.duration }); // #endif this.$emit('click') } } } </script> <style lang="scss" scoped> @import '../../libs/css/components.scss'; $u-back-top-flex:1 !default; $u-back-top-height:100% !default; $u-back-top-background-color:#E1E1E1 !default; $u-back-top-tips-font-size:12px !default; .u-back-top { @include flex; flex-direction: column; align-items: center; flex:$u-back-top-flex; height: $u-back-top-height; justify-content: center; background-color: $u-back-top-background-color; &__tips { font-size:$u-back-top-tips-font-size; transform: scale(0.8); } } </style>