更新记录

2.3.0(2023-10-26) 下载此版本

兼容vue2,vue3

增加可选参数: effect--背景高斯模糊

2.2.5(2023-07-13) 下载此版本

增加微信小程序端判断

2.2.4(2022-09-05) 下载此版本

字段名更正: fiexdHolder => fixedHolder; fixedHolder判断字段名同时更正

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

zero-custom-bar

插件说明

个人仅测试于微信小程序,一个功能完善的自适应头部导航栏组件

使用方法

<template>
  <view class="container">
    <!-- 用于首页等,无需返回按钮 -->
    <zero-custom-bar title="zerojs的小程序"></zero-custom-bar>

    <!-- 用于二级页面等,需要按钮 -->
    <zero-custom-bar
      title="zerojs的小程序"
      :singleIcon="true"
    ></zero-custom-bar>
    <!-- 或 -->
    <zero-custom-bar
      title="zerojs的小程序"
      :zeroCapsule="true"
      @clickCustom="handleHome"
    ></zero-custom-bar>

    <!-- slot用法 (vue2)-->
    <zero-custom-bar>
      <view slot="left"> left </view>
    </zero-custom-bar>

    <!-- slot用法 (vue3)-->
    <template v-slot:left>
      <view class="left">left</view>
    </template>
  </view>
</template>
<script>
  export default {
    data() {
      return {};
    },
    created() {},
    methods: {
      handleHome() {
        uni.showToast({
          title: "点击了首页",
          duration: 2000,
        });
      },
    },
  };
</script>
<style lang="scss" scoped></style>

参数说明

参数 类型 默认值 描述
fixed 时生成一个占位的盒子 Boolean true 是否固定在顶部
fixedHolder Boolean true fixed 时生成一个占位的盒子
backgroundColor String '' 背景色
color String '#000000' 标题颜色
capsuleLeft Boolean true 左侧盒子(左右同时开启关闭标题才能居中)
capsuleRight Boolean true 右侧盒子(左右同时开启关闭标题才能居中)
capsuleLeftWidth Number 0 自定义左侧盒子宽度
capsuleRightWidth Number 0 自定义右侧盒子宽度
zeroCapsule Boolean false 作者提供的双按钮胶囊(只位于左侧盒子)
zeroCapsuleIconL String 'back' 自定义双按钮胶囊左侧图标
zeroCapsuleIconR String 'home' 自定义双按钮胶囊右侧图标
singleIcon Boolean false 作者提供的单按钮胶囊(只位于左侧盒子)
singleIconType Boolean 'back' 自定义单按钮胶囊图标
logo String '' logo 图片,请使用网络路径
title String '' 自定义标题
navBarHeightCustom Number 0 自定义导航栏高度(不建议使用)
stopZeroGoBack Boolean false 关闭返回按钮的默认动作(返回上一页)
logoRadius Number 0 logo 的圆角值
effect Boolean true 高斯模糊背景 (backgroundColor 需要有透明度)

slot 说明

slot 名 说明
default 向导航栏中间插入
left 向导航栏左侧插入
right 向导航栏右侧插入

event 说明

事件名 说明 返回值
@clickBack 左侧按钮点击时触发 true
@clickCustom 右侧按钮点击时触发 true

插件预览: code

小程序搜索: zerojs 零技术

预览的小程序不一定能及时更新当前插件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问