关于uniapp回到顶部-支持小程序与H5 + 图片压缩
**
## [ 大图片压缩]
**
HTML滚动条
<scroll-view class="wrap" scroll-y='true' :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation='true'>...</scroll-view>
返回顶部按钮
<view class="to-top" @click="goTop">
<image src="../../../static/lesson/top.png" mode="widthFix"></image>
</view>
CSS
.to-top{
width: 70upx;
height: 70upx;
border-radius: 50%;
background-color: #4a81f6;
position: fixed;
right: 23upx;
bottom: 300upx;
z-index: 9999;
box-shadow: 0px 3px 5px 3px #93a2c1;
@include flex($content:center);
image{
width: 36upx;
height: auto;
}
}
JS
数据
data(){
return{
//滚动条位置
scrollTop:0, //
old: {
scrollTop: 0
}
}
}
返回顶部事件
/**
* 返回顶部
*/
//记录滚动条位置
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
//记录滚动条位置
goTop: function(e) {
this.scrollTop = this.old.scrollTop
//在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
this.$nextTick(function() {
this.scrollTop = 0
});
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!