更新记录

1.0.10（2023-01-31）

背景图片调整

1.0.9（2023-01-31）

更新

1.0.8（2022-08-17）

更新事件说明

平台兼容性

telly-nav-bar

|APP|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 | |√ |√ |√ |× |未测 |未测 |未测 |

事件

该插件在uni-nav-bar 的基础上 自行补充开发的

uni-nav-bar文档

index.vue 传入想要设置的图片

<template>
    <view>
        <view id="navigatorBar">
            <telly-nav-bar :showLeft="false" :titleText="title" :imageURL="imageURL"></telly-nav-bar>
        </view>
        <view class="" style="background-image: url('~@/static/titlebg.jpg');">
            telly-nav-bar 自定义导航栏 可设导航栏背景图片1 传入想要设置的图片
            <view style="color: #3cafff;" @click="nextPage">下一个页面</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'telly-nav-bar',
                imageURL: "https://img1.baidu.com/it/u=1688680882,2943600730&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=362"
            }
        },
        onLoad() {

        },
        methods: {
            nextPage() {
                uni.navigateTo({
                    url: 'demo'
                })
            }
        }
    }
</script>

demo.vue 使用插件中默认图片（可在插件中更改）

<template>
    <view>
        <view id="navigatorBar">
            <telly-nav-bar :showLeft="true" leftIcon="back" :titleText="title"></telly-nav-bar>
        </view>
        <view class="">
            页面二 ，telly-nav-bar 自定义导航栏 可设导航栏背景图片 使用组件中默认图片（可在插件中更改）
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "页面二" 
            }
        },
        methods: { 
        }
    }
</script>

<style>

</style>

pages.json 设置 禁用系统标题导航，使用自己定义的导航

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationStyle": "custom", //禁用系统标题导航，使用自己定义的导航
                "app-plus": {
                    "titleNView": false
                }
            }
        }, {
            "path": "pages/index/demo",
            "style": {
                "navigationStyle": "custom", //禁用系统标题导航，使用自己定义的导航
                "app-plus": {
                    "titleNView": false
                }
            }

        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}