關於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
	});
},

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章