快捷導(dǎo)航

uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法

更新時(shí)間：2023年08月28日 11:56:01 作者：又一年764

這篇文章主要給大家介紹了關(guān)于uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法的相關(guān)資料,在uniapp中要實(shí)現(xiàn)回到頂部的效果有兩種方法實(shí)現(xiàn),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

一、方法一

<template>
    <view class="content">
        <view class="" v-for="(item,index) in 100" :key="index">
            {{index}}
        </view>
        <view class="upward" v-if="isShow" @click="Totop()">
            <u-icon name="arrow-upward" color="#434343" size="28"></u-icon>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                isShow:false,
            }
        },
        onPageScroll(e){
             // 監(jiān)聽頁(yè)面滾動(dòng)
            if(e.scrollTop>200){
                this.isShow=true;
            }else{
                this.isShow=false;
            }
        },
        methods: {
            Totop(){
                uni.pageScrollTo({
                    scrollTop: 0,//滾動(dòng)到頁(yè)面的目標(biāo)位置
                    duration: 300
                });
            }
        }
    }
</script>
<style lang="less">
    .content{
        width: 100%;
        position: relative;
        .u-tabs{
            width: 100%;
            // margin: 18rpx auto;
            height: 80rpx;
            display: flex;
            align-items: center;
            background-color: #fff;
        }
        .upward{
            width: 70rpx;
            height: 70rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100%;
            border: 3rpx solid #d0d0d0;
            margin-bottom: 20rpx;
            background-color: rgba(255, 255, 255, 0.4);
            position: fixed;
            bottom: 300rpx;
            right: 30rpx;
        }
    }
</style>

onPageScroll是頁(yè)面生命周期，監(jiān)聽頁(yè)面滾動(dòng)，參數(shù)為Object

uni.pageScrollTo相關(guān)參數(shù)在官方文檔可以查看

效果圖（頁(yè)面滾動(dòng)距離大于200顯示回頂按鈕）

二、使用uView組件

<template>
    <view class="wrap">
        <text>滑動(dòng)頁(yè)面，返回頂部按鈕將出現(xiàn)在右下角</text>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>
</template>
<script>
export default {
    data() {
        return {
            scrollTop: 0
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    }
};
</script>
<style lang="scss" scoped>
    .wrap {
        height: 200vh;
    }
</style>

總結(jié)

到此這篇關(guān)于uniapp頁(yè)面回到頂部?jī)煞N實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)uniapp頁(yè)面回到頂部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！