50858245@qq.com
50858245@qq.com
  • 发布:2019-11-22 15:23
  • 更新:2020-10-18 12:55
  • 阅读:1879

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

分类:uni-app

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

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

552088072@qq.com - 学习中

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

1254442318@qq.com

1254442318@qq.com

老哥,你怎么解决的

EvinK@foxmail.com

EvinK@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>

要回复问题请先登录注册