为你的uniapp设置一个全局组件

手机APP/开发
727
0
0
2022-03-31
标签   uni-app

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

该方法仅支持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
返回按钮会存在每个页面,点击即可跳转设定好的页面,如果需要动态配置跳转页面,可在组件里设置