You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
4.3 KiB
114 lines
4.3 KiB
<!-- 返回页面顶部 buy 缪启峙
|
|
引入 返回顶部组件如:
|
|
<vGoTop :pageScroll ="PageScroll" goTopStyle="bottom:20px;right:20px;" :showTopHeight ="可不填默认为 300"/>
|
|
pageScroll // 页面滑动的高度,
|
|
goTopStyle // 返回按钮与底部,左右的距离,
|
|
showTopHeight // 滑动高度>按钮出现高度时出现返回按钮 ！
|
|
-->
|
|
|
|
<template>
|
|
<view>
|
|
<view class="go-top" :class="{'top-show':isShowTop}" @click="goTop" :style="goTopStyle">
|
|
<view class="iconfont icon-top"></view>
|
|
<!-- <image src="data:image/png;base64,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"></image> -->
|
|
<!-- <text>顶部</text> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var scorllTimert = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
isShowTop: false
|
|
};
|
|
},
|
|
methods: {
|
|
goTop(e) {
|
|
if (this.topType === "page") {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300
|
|
});
|
|
} else if (this.topType === "view") {
|
|
this.$emit("clickBtn");
|
|
}
|
|
},
|
|
//防止滚动触发多次函数
|
|
debounce(wait, immediate) {
|
|
var that = this;
|
|
return function() {
|
|
// 每次触发 scroll 时先清除定时器
|
|
clearTimeout(scorllTimert);
|
|
scorllTimert = setTimeout(function() {
|
|
that.handler(immediate);
|
|
}, wait);
|
|
}();
|
|
},
|
|
handler(scrollHeight) {
|
|
this.isShowTop = scrollHeight > this.showTopHeight;
|
|
},
|
|
},
|
|
watch: {
|
|
pageScroll(value) {
|
|
this.debounce(200, value)
|
|
}
|
|
},
|
|
props: {
|
|
pageScroll: Number,
|
|
showTopHeight: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
topType: {
|
|
type: String,
|
|
default: "page"
|
|
},
|
|
goTopStyle: String
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.go-top {
|
|
position: fixed;
|
|
bottom: 156upx;
|
|
right: 24upx;
|
|
width: 76upx;
|
|
height: 76upx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
z-index: 16;
|
|
transform: translateY(80upx);
|
|
opacity: 0;
|
|
transition: all .5s ease;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1upx solid #eee;
|
|
}
|
|
|
|
.go-top.top-show {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.go-top .iconfont {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 76upx;
|
|
height: 76upx;
|
|
line-height: 76upx;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* .go-top text {
|
|
display: inline-block;
|
|
color: #333;
|
|
font-size: 22upx;
|
|
margin-top: 38upx;
|
|
position: relative;
|
|
z-index: 10;
|
|
} */
|
|
</style>
|
|
|