微信扫一扫看面试题

关注面试题库

关于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
	});
},

在这里插入图片描述

posted @   web前端面试小助手  阅读(122)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示