更新记录

1.0.0（2020-08-14） 下载此版本

1.0.0

平台兼容性

1.0.0

插件市场 https://ext.dcloud.net.cn/plugin?id=2513 gitee https://gitee.com/zerossr/mys-navBar

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>

值说明

相关配置

  /* 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: "",
  },

事件说明