realty/virgo.wzfrontend/yui_wx/uni_modules/uv-back-top/components/uv-back-top/uv-back-top.vue

<template>
	<uv-transition mode="fade" :customStyle="backTopStyle" :show="show">
		<slot>
			<view class="uv-back-top" :style="[contentStyle]" @click="backToTop">
				<uv-icon :name="icon" :custom-style="iconStyle"></uv-icon>
				<text v-if="text" class="uv-back-top__text">{{text}}</text>
			</view>
		</slot>
	</uv-transition>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	/**
	 * backTop 返回顶部
	 * @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
	 * @tutorial https://www.uvui.cn/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 <uv-back-top :scrollTop="scrollTop"></uv-back-top>
	 */
	export default {
		name: 'uv-back-top',
		emits: ['click'],
		mixins: [mpMixin, mixin, props],
		computed: {
			backTopStyle() {
				// 动画组件样式
				const style = {
					bottom: this.$uv.addUnit(this.bottom),
					right: this.$uv.addUnit(this.right),
					width: '40px',
					height: '40px',
					position: 'fixed',
					zIndex: 10,
				}
				return style
			},
			show() {
				return this.$uv.getPx(this.scrollTop) > this.$uv.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 this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
			}
		},
		methods: {
			backToTop() {
				// #ifdef APP-NVUE
				if (!this.$parent.$refs['uv-back-top']) {
					this.$uv.error(`nvue页面需要给页面最外层元素设置"ref='uv-back-top'`)
				}
				dom.scrollToElement(this.$parent.$refs['uv-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 '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	$uv-back-top-flex: 1 !default;
	$uv-back-top-height: 100% !default;
	$uv-back-top-background-color: #E1E1E1 !default;
	$uv-back-top-tips-font-size: 12px !default;
	.uv-back-top {
		@include flex;
		flex-direction: column;
		align-items: center;
		flex: $uv-back-top-flex;
		height: $uv-back-top-height;
		justify-content: center;
		background-color: $uv-back-top-background-color;
		&__tips {
			font-size: $uv-back-top-tips-font-size;
			transform: scale(0.8);
		}
	}
</style>