37.自定义导航栏开发 uni-app

迈不过友情╰ 2022-12-11 13:53 180阅读 0赞

参考：[https://uniapp.dcloud.io/collocation/pages?id=app-plus][https_uniapp.dcloud.io_collocation_pages_id_app-plus]  禁止原生导航

1.新建发布页面add-input,在pages里写

2.在index.html写原生导航按钮的监听事件函数

onNavigationBarButtonTap(e)\{  
                console.log(JSON.stringify(e));  
                if(e.index==)\{  
                  uni.navigateTo(\{  
                      url: "../add-input"  
                  \})  
                \}              
            \}

3.写发布页自定义导航，需要在pages.json配置

1）运行hello-uni-app，查看扩展主件下的NavBar自定义导航栏

2）看源码pages目录下extUI下，nav-bar文件夹下的nav-bar.vue文件

3）需要nav-bar组件

4）查看nva-bar组件，需要引入以下两个组件

import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";  
         import uniIcons from "../uni-icons/uni-icons.vue";

5)复制三个组件到我们工程组件文件夹

![20201002163627321.png][]

6）写的代码如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70][]

7）查看，为了写中间的所有人可看的下拉选项

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 1][]

代码如下：为了如下效果

uni.showActionSheet(\{  
                    itemList: changelook,  
                    success: (res)=> \{  
                        this.yinshi=changelook\[res.tapIndex\];  
                       
                        // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');  
                    \}  
                    // ,fail: function (res) \{  
                    //     console.log(res.errMsg);  
                    // \}  
                \});

附录1：add-input.vue代码

<template>  
    <view>  
          
          
        <uni-nav-bar  :statusBar="true" rightText="发布" left-icon="arrowleft"  @clickLeft="back"  @clickRight="submit">  
           <view class="u-f-ajc" @tap="changelook">  
               \{ \{yinshi\}\}  
              <view class="icon iconfont icon-xialazhankai"></view>  
                           
                             
           </view>  
        </uni-nav-bar>  
    </view>  
</template>

<style>

</style>

附录2：index.vue代码

\}  
</script>

<style>

</style>  
附件3：效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 2][]

[https_uniapp.dcloud.io_collocation_pages_id_app-plus]: https://uniapp.dcloud.io/collocation/pages?id=app-plus
[20201002163627321.png]: /images/20221123/178b0b80a00046338784d2e04e7a5f8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70]: /images/20221123/91af347431804065aaf3baa314984c9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/7dc8b4eb3e594aecabf15a65abfc5577.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/da87446d1dad4d4dacfe7437164d1706.png