237 lines
5.2 KiB
Vue
Raw Normal View History

2025-07-22 18:31:50 +08:00
<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>