ZeroShiro/mys-navBar

1.0.0

uniapp 小程序H5顶部自定义导航栏 插件市场 https://ext.dcloud.net.cn/plugin?id=2513

mys-navBar 自定义顶部导航栏,小程序 H5 导航栏,搜索框,通用导航

使用方法

nvue 测试使用 把 demo-X.vue 改为 nvue 测试

喜欢的 git 点个 star ❤️ 感谢

// 在page.json 中 先定义 navigationBarTextStyle
// 页面白色背景就使用 black  相反 white
"style": {
        "navigationStyle": "custom",
        "navigationBarTextStyle": "black" // white
 }

引入

// mysNavBar.vue 设置好以下内容
/* 默认首页路径 */
const homePath = "/pages/index/index";

import mvBar from "@/components/mys_navBar/mysNavBar";
Vue.component("mvBar", mvBar);

<mvBar
  :mysNavConfig="mysNavConfig"
  @onLeftClick="onLeftClick"
  @onRightClick="onRightClick"
  @changeInput="changeInput"
  @clearInput="clearInput"
  @submitInput="submitInput"
  @clickInput="clickInput"
></mvBar>

值说明

主要配置 mysNavConfig

属性	默认值	可选	类型	简介
navFixed	true	Boolean	Boolean	导航固定
navPadding	true	Boolean	Boolean	导航占位,顶部是否空出位置
bgColor	"#f8f8f8"	-	String	导航背景色
bgImage	-	-	String	导航背景渐变 背景图
isOpacity	false	Boolean	Boolean	开启渐变 opacity 可不传值
opacityTime	100	-	Number	渐变延时效果
opacity	1	-	Number	透明度
btnType	type1	type1,type2	String	按钮类型 使用 2 时需要配置 2
leftText	Object	-	Object	type1 按钮 左侧文字配置,参考 相关配置
navTitle	Object	-	Object	导航中间标题配置,参考 相关配置
type2Config	Object	-	Object	type1 按钮配置,参考 相关配置
searchConfig	Object	-	Object	搜索框配置,参考 相关配置
isCustomFn	false	Boolean	Boolean	导航左侧点击,@onLeftClick
leftIconPath	-	-	String	导航左侧图标路径
rightIconPath	-	-	String	导航右侧图标路径
homeIconPath	-	-	String	导航返回首页图标路径

相关配置

  /* type1 左侧文字配置 */
  leftText: {
    text: "",
    color: "",
    ontSize: "16px", // px upx rpx
    fontWeight: "", // blod
   },
  /* 标题 */
  navTitle: {
    text: "",
    color: "",
    fontSize: "", // px upx rpx
    fontWeight: "", // blod
   },
  /* type2 按钮 */
  type2Config: {
    // 左图标
    leftPath: "/static/back_w.png",
    // 右图标
    rightPath: "/static/home.png",
    // 圆角
    radius: "40rpx",
   },
    /* 搜索框配置 */
  searchConfig: {
    // 搜索值
    value: "",
    confirmType: "search",
    placeholder: "",
    // 禁用
    disabled: true,
    placeholderStyle: 'color:red;--;',
    // 距离
    marginRight: "",
    marginLeft: "",
  },

事件说明

事件名	说明	回调参数
onLeftClick	开启 isCustomFn 时点击左侧	-
onRightClick	配置 rightIconPath 时点击右侧	-
changeInput	配置 searchConfig 时 input 值发生变化	event
clearInput	清空搜索框	-
submitInput	提交	evnet
clickInput	disabled 禁用搜索框时 点击	-