<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>