5***@qq.com
5***@qq.com
  • 发布:2019-11-22 15:23
  • 更新:2023-06-18 08:13
  • 阅读:8557

uniApp Tabbar 可以监听点击事件并拦截吗?

分类:uni-app

当一个app 有五个tab 其中3个不需要登录,但是第4 个和第5个需要登录才能正常显示,这时我在需要登录界面onshow中添加登录验证,如果没有登录 调用uni.navigateTo 这时会出现js阻塞新界面会出现短暂的白屏,这种问题可以优化一下吗?

2019-11-22 15:23 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com - work

同问啊 老哥 解决没有啊 解决了 加我微信552088072 教我一下啊

hhyang

hhyang - 如有问题,请添加QQ1606726660 备注付费咨询

独梦寒风

独梦寒风 - 天荒地老终不悔,草木有情山海枯

老哥,你怎么解决的

E***@foxmail.com

E***@foxmail.com

提供一个思路(仅针对APP端,不过web也不必要,随便hack一下就解决了)

  1. 使用plus创建一个native view 对象

helpers.ts

import { View } from '@/typings/global'  

export class ViewCreator {  
    view: View = {} as any  
    createView() {  
        this.view = new plus.nativeObj.View('test', {  
            bottom: '0px',  
            left: '0px',  
            height: '60px',  
            width: '100%'  
        })  
        this.view.drawText(  
            '',  
            {},  
            {  
                size: '24px',  
                color: '#FF0000',  
                backgroundColor: '#FFFFFF'  
            }  
        )  
        this.view.show()  
        return this  
    }  

    addEventView(callback: (e: Event) => void) {  
        this.view.addEventListener('click', callback, false)  
        return this  
    }  

    close() {  
        if (this.view) this.view.close()  
    }  
}  
  1. 引入首页的vue文件(如 home.vue)

home.vue

<script>  
import { UserService } from '@/services/user-service'  
import { ViewCreator } from '@/helpers'  
export default {  
    data() {  
        return {  
            user: null,  
        }  
    },  
    methods: {  
        customViewEvent(e) {  
            this.$refs.loading.open()  
            console.log('e.clientX', e.clientX)  

            if (e.clientX > 90) {           // => 使用 e.clientX 判断用户点击区域  
                 UserService.getUser()  
                     .catch(e => {  
                         console.error(e)  // => 这里做错误处理,可以跳到登录页面  
                     })  
                     .then(user => {       //  => 成功之后需要手动调用 uni.switchTab(..)  
                         console.log('get loggedUser', user)  
                         if (e.target) e.target.close()  
                         this.$refs.loading.close()  
                     })  
             }  
        },  
        onReady() {  
            const view = new ViewCreator().createView().addEventView(this.customViewEvent)  
            console.log('view', view)  
        },  
       ... // other code  
</script>
1***@qq.com

1***@qq.com - 秋南

老哥,怎么解决的,可以给个思路吗

Tail前端

Tail前端

4个item 只针对app端
监听 我的

APP.vue

<script>  
    export default {  
        data() {  
            return {  
                robotView: null  
            }  
        },  
        onLaunch: function() {  
            // #ifdef APP-PLUS  
            plus.screen.lockOrientation('portrait-primary'); //锁定屏幕  
            let that = this,  
                naviArr = [  
                    'navigateTo',  
                    'redirectTo',  
                    'reLaunch',  
                    'switchTab',  
                    'navigateBack',  
                ]  
            for (let i of naviArr) {  
                uni.addInterceptor(i, {  
                    //监听跳转  
                    success(e) {  
                        that.watchRouter(i, e)  
                    },  
                })  
            }  
            that.watchRouter()  
            // #endif  

        },  
        onShow: function() {  
            console.log('App Show')  

        },  
        onHide: function() {  
            console.log('App Hide')  
        },  
        methods: {  
            onclick() {  
                let isLogin = uni.getStorageSync('token_key');  
                console.log(isLogin)  
                if (isLogin) {  
                    uni.switchTab({  
                        url: '/pages/my/my'  
                    })  
                } else {  
                    uni.navigateTo({  
                        url: '/pages/login/login'  
                    })  
                }  
            },  
            watchRouter(i, e) {  
                // getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。  
                let pages = getCurrentPages();  
                let currentPath = pages[pages.length - 1]?.$page.fullPath  
                if (currentPath === undefined || ['/pages/game/game', '/pages/index/index', '/pages/fine/fine',  
                        '/pages/originality/originality'  
                    ].includes(currentPath)) {  
                        this.robotView?.hide()  
                            this.robotView = new plus.nativeObj.View('robot-btn', {  
                                    bottom: '0px',  
                                    left: '80%',  
                                    height: '44px',  
                                    width: '100px'  
                                },  
                                [{  
                                        tag: 'img',  
                                        id: 'robot',  
                                        position: {  
                                            top: '0px',  
                                            left: '0px',  
                                            width: '68px',  
                                            height: '44px'  
                                        }  
                                    },  

                                ]);  
                            this.robotView.show();  
                            this.robotView.addEventListener("click", (e) => {  
                                this.onclick(e)  
                            }, false);  

                } else if(currentPath=='/pages/login/login') {  
                    this.robotView?.hide()  
                }else {  
                    this.robotView?.hide()  
                }  

            },  
        },  
    }  
</script>  

<style lang="scss">

要回复问题请先登录注册