uni-app回到顶部功能(组件)
图示
在components文件夹下新建back-top/back-top.vue,写入以下代码
<template>
<view v-if="scrollTop>400" class="backTop" :class="{'mescroll-fade-in':isShowToTop}" @click="toTopClick">
<text class="iconfont iconjiantou4" style="color: #fff;font-size:40rpx"></text> <!-- 此处为iconfont图标,可根据自己项目设置 -->
</view>
</template>
<script>
export default {
name: "backTop",
props: {
id: {
type: String,
default: ''
},
scrollTop: {
type: Number,
default: 0
},
tab: {
type: Boolean,
default: false
}
},
data() {
return {
isShowToTop: true
}
},
methods: {
toTopClick() {
this.isShowToTop = false; // 回到顶部按钮需要先隐藏,再执行回到顶部,避免闪动
if (this.tab) {
this.$emit('setScrollTop');
} else {
uni.pageScrollTo({
scrollTop: 0,
duration: 200
});
}
}
},
}
</script>
<style>
.mescroll-lazy-in,
.mescroll-fade-in {
-webkit-animation: mescrollFadeIn .3s ease forwards;
animation: mescrollFadeIn .3s ease forwards;
}
.backTop {
z-index: 999;
position: fixed;
right: 30rpx;
bottom: 120rpx;
/* #ifdef H5 */
bottom: 220rpx;
/* #endif */
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
border-radius: 50%;
transform: translateZ(0);
-webkit-transform: translateZ(0);
background-color: rgba(0,0,0,.35);
text-align: center;
}
</style>
在main.js中引入back-top组件
import backTop from '@/components/back-top/back-top.vue';
Vue.component('back-top',backTop)
在页面中使用
<template>
<view class="container">
<view class="list-content">
<back-top :scrollTop="scrollTopCount"></back-top> <!-- 1、组件部分 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTopCount:0, //2、距离顶部距离
};
},
//3、监听滚动
onPageScroll(e) {
this.scrollTopCount = e.scrollTop;
},
}
</script>
注:以上功能实现基于插件: https://ext.dcloud.net.cn/plugin?id=1181
分类:
uni app (vue2版)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
2019-09-09 vue移动端项目经验
2019-09-09 文字溢出时省略号表示