yshi/fuintUniapp/uview-ui/components/u-back-top/u-back-top.vue

<template>
    <view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
        bottom: bottom + 'rpx',
        right: right + 'rpx',
        borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
        zIndex: uZIndex,
        opacity: opacity
    }, customStyle]">
        <view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
            <u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
            <view class="u-back-top__content__tips">
                {{tips}}
            </view>
        </view>
        <slot v-else />
    </view>
</template>

<script>
    export default {
        name: 'u-back-top',
        props: {
            // 返回顶部的形状，circle-圆形，square-方形
            mode: {
                type: String,
                default: 'circle'
            },
            // 自定义图标
            icon: {
                type: String,
                default: 'arrow-upward'
            },
            // 提示文字
            tips: {
                type: String,
                default: ''
            },
            // 返回顶部滚动时间
            duration: {
                type: [Number, String],
                default: 100
            },
            // 滚动距离
            scrollTop: {
                type: [Number, String],
                default: 0
            },
            // 距离顶部多少距离显示，单位rpx
            top: {
                type: [Number, String],
                default: 400
            },
            // 返回顶部按钮到底部的距离，单位rpx
            bottom: {
                type: [Number, String],
                default: 200
            },
            // 返回顶部按钮到右边的距离，单位rpx
            right: {
                type: [Number, String],
                default: 40
            },
            // 层级
            zIndex: {
                type: [Number, String],
                default: '9'
            },
            // 图标的样式，对象形式
            iconStyle: {
                type: Object,
                default() {
                    return {
                        color: '#909399',
                        fontSize: '38rpx'
                    }
                }
            },
            // 整个组件的样式
            customStyle: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        watch: {
            showBackTop(nVal, oVal) {
                // 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
                // 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
                if(nVal) {
                    this.uZIndex = this.zIndex;
                    this.opacity = 1;
                } else {
                    this.uZIndex = -1;
                    this.opacity = 0;
                }
            }
        },
        computed: {
            showBackTop() {
                // 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
                // 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
                return this.scrollTop > uni.upx2px(this.top);
            },
        },
        data() {
            return {
                // 不透明度，为了让组件有一个显示和隐藏的过渡动画
                opacity: 0,
                // 组件的z-index值，隐藏时设置为-1，就会看不到
                uZIndex: -1
            }
        },
        methods: {
            backToTop() {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: this.duration
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../libs/css/style.components.scss";
    
    .u-back-top {
        width: 80rpx;
        height: 80rpx;
        position: fixed;
        z-index: 9;
        @include vue-flex;
        flex-direction: column;
        justify-content: center;
        background-color: #E1E1E1;
        color: $u-content-color;
        align-items: center;
        transition: opacity 0.4s;
        
        &__content {
            @include vue-flex;
            flex-direction: column;
            align-items: center;
            
            &__tips {
                font-size: 24rpx;
                transform: scale(0.8);
                line-height: 1;
            }
        }
    }
</style>