xieshaoguangwww@126.com
xieshaoguangwww@126.com
  • 发布:2018-08-03 18:01
  • 更新:2019-09-17 10:53
  • 阅读:9253

uni-app的navigationBar不是仅仅显示文字,还需要显示更多信息,应该怎么实现

分类:uni-app

uni-app的navigationBar不是仅仅显示文字,还需要显示更多信息例如:“搜索框”,“更多”,“分享”,“购物车”等,应该怎么实现,仅仅是靠下面这些属性实现不了吧:
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮。 微信小程序
backgroundColorTop String #ffffff 顶部窗口的背景色。 微信小程序且为 iOS
backgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且为 iOS

2018-08-03 18:01 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

  1. 设置navigationStyle为custom ,然后自己重新写title区的内容。
    navigationStyle参考:http://uniapp.dcloud.io/collocation/pages
  2. 也可以看pages.json文档,app和h5端有更多自定义的配置
xieshaoguangwww@126.com

xieshaoguangwww@126.com (作者)

<view class="index" v-if="pageLoad">  

         <view class="status_bar">  
            <view class="top_view">xxxx</view>  
        </view>  
</view>  

.index {  
        display: flex;  
        flex: 1;  
        flex-direction: column;  
        overflow: hidden;  
        width: 750px;  
        height: 100%;  
    }  

    .status_bar {  
        height: var(--status-bar-height);  
        width: 100%;  
    }  
    .top_view{  
        height: var(--status-bar-height);  
        width: 100%;  
        position: fixed;  
        top: 0;  
    }

按照您的回复,用图中版本就可以解决,但是不行

  • xieshaoguangwww@126.com (作者)

    @16 :请看我上传的图片的问题,怎么解决?

    2018-08-16 13:44

  • Trust

    上传一个可以直接运行起来重现此问题的项目。

    2018-08-16 14:23

xiaoyan421123@126.com

xiaoyan421123@126.com

要回复问题请先登录注册