多彩宝移动端 UI 组件库

# NavBarPage

# 基础渲染

标题 
<template>
  <d-nav-bar-page
    class="page-home"
    title="标题"
    close
    service
    @back="handleClick('back')"
    @close="handleClick('close')"
    @service="handleClick('service')"
  >
    <div
      class="page-home-content"
    >
      <div style="height: 20px; margin-bottom: 20px; background: #00bc9d"
           v-for="item in 30"></div>
    </div>
  </d-nav-bar-page>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(v) {
      alert(v);
    },
  },
};
</script>
<style lang="scss">
.page-home-content {
  background: rosybrown;
}
.x-demo-container{
  .d-nav_bar-nav_bar_fixed{
    width: 351px;
  }
}
</style>

# 插槽渲染

搜索关键词
<template>
  <div class="slot">
    <d-nav-bar-page
      class="page-home"
      title="标题"
      :scrollCallBack="scrollCallBack"
    >
      <template #navBar>
        <d-nav-bar
          search
          search-bg-color="rgba(255, 255, 255, 0.41)"
          :background="navBarBg"
          :safe-top="true"
          :color="color"
          fixed
          @back="handleClick('back')"
          @search="handleClick('handleClick')"
        />
      </template>
      <div class="content">
        <div
          style="height: 20px; margin-bottom: 20px; background: #00bc9d"
          v-for="item in 30"
        ></div>
      </div>
    </d-nav-bar-page>
  </div>
</template>
<!--插槽-->
<script>
export default {
  data() {
    return {
      navBarBg: 'transparent',
      color: '#fff',
    };
  },
  methods: {
    handleClick(v) {
      alert(v);
    },
    //  that 组件实例，opacity 透明度, scrollExceed 滚动距离是否超过导航栏高度, scrollTop 滑动距离顶部的高度
    scrollCallBack({that, opacity, scrollExceed, scrollTop}) {
      this.navBarBg = `linear-gradient(270deg, rgba(253, 154, 120, ${opacity}) 0%,
       rgba(255, 161, 23, ${opacity}) 51%, rgba(255, 123, 105, ${opacity}) 100%)`;
      this.color = '#000';
      if (scrollTop === 0) {
        this.navBarBg = 'transparent';
        this.color = '#fff';
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content{
  background: rosybrown;
}
.x-demo-container{
  .d-nav_bar-nav_bar_fixed{
    width: 351px;
  }
}
</style>

# 自定义渲染

返回
标题
按钮
<template>
  <div class="custom1">
    <d-nav-bar-page
      class="page-home"
      title="标题"
      :scrollCallBack="scrollCallBack"
    >
      <template #navBar>
        <d-nav-bar
          leftText="返回"
          title="标题"
          :background="navBarBg"
          :color="color"
          fixed
          :safe-top="false"
          @back="handleClick('back')"
        >
          <template #action>
            <div class="link">
              <d-icon name="link" @click="handleClick('link')"/>
              <span @click="handleClick('按钮')">按钮</span>
            </div>
          </template>
        </d-nav-bar>
      </template>
      <div class="content">
        <div
          style="height: 20px; margin-bottom: 20px; background: #00bc9d"
          v-for="item in 30"
        ></div>
      </div>
    </d-nav-bar-page>
  </div>
</template>
<!--插槽-->
<script>
export default {
  data() {
    return {
      navBarBg: 'transparent',
      color: '#000',
    };
  },
  methods: {
    handleClick(v) {
      alert(v);
    },
    //  that 组件实例，opacity 透明度, scrollExceed 滚动距离是否超过导航栏高度, scrollTop 滑动距离顶部的高度，pageHeadH // 导航栏区域的高度
    scrollCallBack({that, opacity, scrollExceed, scrollTop, pageHeadH}) {
      this.navBarBg = `linear-gradient(270deg, rgba(253, 154, 120, ${opacity}) 0%,
       rgba(255, 161, 23, ${opacity}) 51%, rgba(255, 123, 105, ${opacity}) 100%)`;
      this.color = '#000';
      console.log('pageHeadH', pageHeadH)
      if (scrollTop === 0) {
        this.navBarBg = 'transparent';
        this.color = '#000';
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content{
  background: rosybrown;
}
.x-demo-container{
  .d-nav_bar-nav_bar_fixed{
    width: 351px;
  }
}
</style>

# # API

# # 属性

名称 说明 类型 默认值
title
导航标题 string
tab
tab菜单，最多只能放2个 array function _default() { return []; }
leftText
左侧文案 string
rightText
右侧文案 string
search
是否展示搜索 boolean false
shamSearch
是否展示虚假输入框 boolean true
site
是否展示搜索 string
siteOption
地址配置项 object function _default() { return { visible: false, addressText: '', province: [{ districtCode: 1, districtSimpleName: '北京' }, { districtCode: 2, districtSimpleName: '广西' }, { districtCode: 3, districtSimpleName: '江西' }, { districtCode: 4, districtSimpleName: '岫岩满族自治县' }], // 省 city: [{ districtCode: 7, districtSimpleName: '朝阳区' }, { districtCode: 8, districtSimpleName: '崇文区' }, { districtCode: 9, districtSimpleName: '昌平区' }, { districtCode: 6, districtSimpleName: '岫岩满族自治县' }], // 市 country: [{ districtCode: 3, districtSimpleName: '八里庄街道' }, { districtCode: 9, districtSimpleName: '北苑' }, { districtCode: 4, districtSimpleName: '岫岩满族自治县' }] // 县 }; }
placeholder
搜索默认提示文案 string 搜索关键词
share
是否展示分享 boolean false
more
是否展示更多 boolean false
service
是否展示客服 boolean false
close
是否展示关闭 boolean false
color
导航栏文案/icon颜色 string
searchBgColor
搜索框背景色 string rgba(245, 245, 245, 1)
fixed
是否浮动布局 boolean true
safeTop
刘海屏安全区，非多彩宝环境设置为false boolean true
showNavBar
是否隐藏导航栏，非多彩宝环境设置为false boolean true
navBarBg
导航栏背景颜色 string transparent
navBarColor
导航栏文字颜色 string #fff
backToTop
再次进入时，是否回到顶部 boolean true
scrollCallBack
页面滑动事件，返回Object（that,// 组件实例，opacity，// 透明度, scrollExceed // 滚动距离是否超过导航栏高度, scrollTop // 滑动距离顶部的高度, pageHeadH // 导航栏区域的高度）,可以通过实例修改newBgColor,newColor的颜色值 function

# # 插槽

名称 说明 参数
default 内容区域，可以滑动 无
navBar 导航栏 无

# # 事件

名称 说明 参数
back 返回 无
close 关闭 无
service 客服 无
more 更多 无
share 分享 无

# # 贡献者

无

←