uni-app 頁面滑動距離後出現回到頂部按鈕,回到頂部

html

<view class="top" :style="{'display':(flag===true? 'block':'none')}">
		<uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons>
</view>

js

data() {
      return {
	       flag:false
        }
},
methods: {
	top() { //回到頂部
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	},
	onPageScroll(e){ //根據距離頂部距離是否顯示回到頂部按鈕
		if(e.scrollTop>600){ //當距離大於600時顯示回到頂部按鈕
			this.flag=true
		}else{ //當距離小於600時顯示回到頂部按鈕
			this.flag=false
		}
	},
}

css

/* 回到頂部 */
	.top {
		position: relative;
		display: none; /* 先將元素隱藏 */
	}

	.topc {
		position: fixed;
		right: 0;
		background: #F0F0F0;
		top: 70%;
		height: 50px;
		line-height: 50px;
	}

 

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