uniapp小程序置顶功能

前端小凯

已于 2024-07-26 11:15:11 修改

阅读量424

点赞数 3

文章标签：小程序 vue.js elementui

于 2024-07-26 11:12:14 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/140710309

版权

html：

<view class="scroll" v-show="showScrollToTop" @click="scrollToTop">
    <text class="iconfont icon-set-top"></text>
</view>

js变量：

data () {
    return {
        // 设备的高度
	    windowHeight: 0,
		// 置顶显示隐藏
		showScrollToTop: false
    }
},
onLoad(option) {
	this.getWindowHeight();
},
onPageScroll(e) {
    this.showScrollToTop = e.scrollTop >= this.windowHeight ? true : false;
}

js方法：

/**
 * 置顶
 */
scrollToTop() {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 1000
	});
},
/**
 * 获取设备的高度
 */
getWindowHeight() {
	uni.getSystemInfo({
		success: res => {
			this.windowHeight = res.windowHeight;
		}
	});
}

css:

.scroll {
	width: 76rpx;
	height: 76rpx;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--view-theme);
	box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 16rpx;
	bottom: 200rpx;
	
	.iconfont {
		font-size: 48rpx;
	}
}

效果图：