uniapp 学习笔记五自定义导航栏组件的全局使用

╰半橙微兮° 2024-04-08 12:52 83阅读 0赞

![b2e827db7029468182d253cecdd778ff.png][]

引入并使用了colorUI和uView组件

nav-custom.vue

<template>
        <view class="cu-bar bg-white">
            <view class="action">
                <text class="cuIcon-locationfill text-gray"></text>
                重庆
            </view>
            <view class="content text-bold">
                Macoffee
            </view>
            <view class="action text-gray">
                <text class="cuIcon-search"></text>
                <u-line direction="col" length="15" margin="20upx"></u-line>
                <text class="cuIcon-sort"></text>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            name:"nav-custom",
            data() {
                return {
                    
                };
            }
        }
    </script>
    
    <style lang="scss">
    
    </style>

局部引入test-my-comp.vue 自定义组件使用

<template>
        <view @tap="handleNum">
            测试公共组件 {
       {name}}
        </view>
    </template>
    
    <script>
        export default {
            name:"test-my-comp",
            props:['name'],
            data() {
                return {
                    
                };
            },
            created() {
                console.log('created 生命周期 执行');
            },
            methods:{
                handleNum(){//组件和页面通信,触发事件
                    this.$emit('onNum',10);
                }
            }
        }
    </script>
    
    <style lang="scss">
    
    </style>

全局引入 组件 uview 和 nav-custom, main.js中

// 全局引入uView主JS库
    import uView from '@/uni_modules/uview-ui'
    Vue.use(uView)
    
    // 全局引入自定义组件
    import NavCustom from '@/components/nav-custom.vue'
    Vue.component('nav-custom',NavCustom)

homee.vue 中使用

<template>
        <view>
            <nav-custom></nav-custom>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    
                }
            },
            methods: {
                
            }
        }
    </script>
    
    <style lang="scss">
    .title{
        color: red;
    }
    </style>

page.json中 加上 隐藏 自带导航栏

{
                "path" : "pages/homee/homee",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false,
                    "navigationStyle": "custom"
                }
                
            }

[b2e827db7029468182d253cecdd778ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6a3f9d63637e48558d07f508404d51c5.png