有你在真好 的个人博客
为你的uniapp设置一个全局组件
阅读:2299 添加日期:2021/3/27 23:17:29 原文链接:https://www.toutiao.com/item/6861931571302105603/

比如添加一个全局跳转按钮

该方法仅支持H5,不支持小程序和App

创建组件

/components/returnback/returnback.vue

<template>
    <view class="returnback" @tap="goTo()">
        <view>返回</view>
    </view>
</template><script>
    export default {
        name:'returnback',
        data() {
            return {
                
            };
        },
        methods:{
            goTo(){
                window.location.href='https://www.baidu.com'
            }
        }
    }
</script><style scoped lang="scss">
.returnback{
    position: fixed;
    left: 20rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 80rpx;
    text-align: center;
    line-height: 80rpx;
    bottom: 20%;
    background: #02BECC;
    box-shadow:0 0 5rpx rgba($color: #000000, $alpha: 0.3);
    color: #FFFFFF;
}
</style>

提示:页面跳转不支持uni.navigateTo reLaunch switchTab 等方法

main.js添加方法

// #ifdef H5
import returnback from '@/components/returnback/returnback.vue'
let rtbak = Vue.component('returnback',returnback)
// #endif// 以下放在app.$mount();下面
// #ifdef H5
document.body.appendChild(new rtbak().$mount().$el)
// #endif

返回按钮会存在每个页面,点击即可跳转设定好的页面,如果需要动态配置跳转页面,可在组件里设置

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号