guozhi-wechat/components/tui-scroll-top/tui-scroll-top.vue

<template>
	<view class="tui-scroll-top_box" v-show="isIndex || isShare || (visible && toggle)" :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }">
		<view class="tui-scroll-top_item" v-if="isIndex" @tap.stop="goIndex">
			<image class="tui-scroll-top_img" :src="indexIcon"></image>
			<view class="tui-scroll-top_text">首页</view>
		</view>
		
		<view class="tui-scroll-top_item tui-scroll-item_bottom" @tap.stop="goNotice">
			<image class="tui-scroll-top_img" :src="noticeIcon"></image>
			<view class="tui-scroll-top_text tui-color-white tui-scroll-notice_text">公告</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="" v-if="isHideAd">
			<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_bottom': isHideAd }" @tap.stop="hideAd">
				<image class="tui-scroll-top_img" :src="adIcon"></image>
				<view class="tui-scroll-top_text"></view>
			</view>
		</view>
		
		<view class="" v-if="isShare">
			<button open-type="share" class="tui-share-btn" v-if="isShare && !customShare">
				<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex }">
					<image class="tui-scroll-top_img" :src="shareIcon"></image>
				</view>
			</button>
			<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex || isHideAd }" v-if="isShare && customShare" @tap.stop="doShare">
				<image class="tui-scroll-top_img" :src="shareIcon"></image>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex || isHideAd || isShare }" v-show="visible && toggle" @tap.stop="goTop">
			<image class="tui-scroll-top_img" :src="topIcon"></image>
			<view class="tui-scroll-top_text tui-color-white">顶部</view>
		</view>
	</view>
</template>

<script>
/**
 * 注意：组件中使用的图片地址，将文件复制到自己项目中
 * 如果图片位置与组件同级，编译成小程序时图片会丢失
 * 拷贝static下整个components文件夹
 * 也可直接转成base64（不建议）
 * */
export default {
	name: 'tuiScrollTop',
	emits: ['index','share'],
	props: {
		// 回顶部按钮距离底部距离 rpx
		bottom: {
			type: Number,
			default: 320
		},
		// 回顶部按钮距离右侧距离 rpx
		right: {
			type: Number,
			default: 25
		},
		// 距离顶部多少距离显示 px
		top: {
			type: Number,
			default: 200
		},
		// 滚动距离
		scrollTop: {
			type: Number
		},
		// 回顶部滚动时间
		duration: {
			type: Number,
			default: 120
		},
		// 是否显示返回首页按钮
		isIndex: {
			type: Boolean,
			default: false
		},
		// 是否显示分享图标
		isShare: {
			type: Boolean,
			default: false
		},
		// 是否显示去除广告图标
		isHideAd: {
			type: Boolean,
			default: false
		},
		// 自定义分享(小程序可使用button=>open-type="share")
		customShare: {
			type: Boolean,
			default: false
		},
		// 回顶部icon
		topIcon: {
			type: String,
			default: '/static/components/scroll-top/icon_top_3x.png'
		},
		// 回首页icon
		indexIcon: {
			type: String,
			default: '/static/components/scroll-top/icon_index_3x.png'
		},
		// 广告icon
		adIcon: {
			type: String,
			default: '/static/components/scroll-top/icon_ad_3x.png'
		},
		// 分享icon
		shareIcon: {
			type: String,
			default: '/static/components/scroll-top/icon_share_3x.png'
		},
		// 公告icon
		noticeIcon: {
			type: String,
			default: '/static/components/scroll-top/icon_empty_3x.png'
		}
	},
	watch: {
		scrollTop(newValue, oldValue) {
			this.change();
		}
	},
	data() {
		return {
			// 判断是否显示
			visible: false,
			// 控制显示，主要解决调用api滚到顶部fixed元素抖动的问题
			toggle: true
		};
	},
	methods: {
		goTop: function() {
			this.toggle = false;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: this.duration
			});
			setTimeout(() => {
				this.toggle = true;
			}, 220);
		},
		goIndex: function() {
			this.$emit('index', {});
		},
		doShare() {
			this.$emit('share', {});
		},
		hideAd() {
			this.$emit('hideAd', {});
		},
		goNotice() {
			this.$emit('goNotice', {});
		},
		change() {
			let show = this.scrollTop > this.top;
			if ((show && this.visible) || (!show && !this.visible)) {
				return;
			}
			this.visible = show;
		}
	}
};
</script>

<style scoped>
.tui-scroll-top_box {
	width: 80rpx;
	height: 270rpx;
	position: fixed;
	z-index: 9999;
	right: 30rpx;
	bottom: 30rpx;
	font-weight: 400;
}

.tui-scroll-top_item {
	width: 80rpx;
	height: 80rpx;
	position: relative;
}

.tui-scroll-item_top {
	margin-top: 30rpx;
}

.tui-scroll-item_bottom {
	margin-bottom: 30rpx;
}

.tui-scroll-top_img {
	width: 80rpx;
	height: 80rpx;
	display: block;
}

.tui-scroll-top_text {
	width: 80rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 24rpx;
	transform: scale(0.92);
	transform-origin: center center;
	position: absolute;
	left: 0;
	bottom: 15rpx;
}

.tui-scroll-notice_text {
	width: 80rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 24rpx;
	transform: scale(0.92);
	transform-origin: center center;
	position: absolute;
	left: 0;
	bottom: 28rpx;
}

.tui-color-white {
	color: #fff;
}
.tui-share-btn {
	background: transparent !important;
	padding: 0;
	margin: 0;
	display: inline;
	border: 0;
}
.tui-share-btn::after {
	border: 0;
}
</style>