更新记录

1.0.0（2023-01-18）

Y-NavBar 自定义顶部导航

介绍

自定义导航,左侧按钮自定义事件，左中右插槽，支持多平台,app端已做兼容statusBar,左侧返回按钮可选择插槽模式或自定义事件，默认事件与type连用控制返回方式。支持样式自定义，可传入样式自定义各种样式。

（已兼容微信小程序右侧胶囊按钮，距离已算好）

参数说明

自定义事件

示例

默认示例
    <ZH-NavBar 
        :title="title"
    >
    </ZH-NavBar>

<script>
export default{
    data(){
        return{
            title:"更多主题"
        }
    }
}
</script>

右上角插槽示例
    <ZH-NavBar 
        :title="title"
    >
        <template #right>
            <uni-icons @tap.stop="clickItem" type="contact" size="30"></uni-icons>   //自定义部分，只是效果展示
         </template>
    </ZH-NavBar>

<script>
export default{
    data(){
        return{
            title:"更多主题"
        }
    }，
    methods:{
    //点击事件
    clickItem(){

    }
}
}
</script>

平台兼容性

Y-NavBar 自定义顶部导航

介绍

自定义导航,左侧按钮自定义事件，左中右插槽，支持多平台,app端已做兼容statusBar,左侧返回按钮可选择插槽模式或自定义事件，默认事件与type连用控制返回方式。支持样式自定义，可传入样式自定义各种样式。

（已兼容微信小程序右侧胶囊按钮，距离已算好）

参数说明

自定义事件

示例

默认示例
    <Y-NavBar 
        :title="title"
    >
    </Y-NavBar>

<script>
export default{
    data(){
        return{
            title:"更多主题"
        }
    }
}
</script>

右上角插槽示例
    <Y-NavBar 
        :title="title"
    >
        <template #right>
            <uni-icons @tap.stop="clickItem" type="contact" size="30"></uni-icons>   //自定义部分，只是效果展示
         </template>
    </Y-NavBar>

<script>
export default{
    data(){
        return{
            title:"更多主题"
        }
    }，
    methods:{
    //点击事件
    clickItem(){

    }
}
}
</script>