提交

uni_modules/z-nav-bar/changelog.md

@@ -0,0 +1,2 @@
+## 2.0.5（2021-05-12）
+1. 支持uni_modules

uni_modules/z-nav-bar/components/z-nav-bar/z-nav-bar.vue

@@ -0,0 +1,683 @@
+<template>
+  <view>
+  
+    <view
+      :class="[
+        navFixed ? 'header_fixed' : '',
+        type == 'transparent' ? 'header_absolute' : '',
+        navShadow ? 'header_shadow' : '',
+        themeBgColorName,
+      ]"
+      :style="[
+        navBgColor ? { backgroundImage: navBgColor } : {},
+        {
+          paddingTop: statusBarHeight + 'px',
+          color: navFontColor,
+          opacity: transparentValue,
+        },
+      ]"
+    >
+      <view class="header_content">
+        <view class="header_left_box">
+          <slot name="left">
+            <view
+              class="header_left_info"
+              :class="[
+                isTwoBtn ? 'header_btnMongol' : '',
+                isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '',
+              ]"
+              v-if="back || $slots.left || home"
+            >
+              <view
+                class="header_left_back"
+                :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
+                v-if="back && !firstPage"
+                @click="onBackPage"
+              >
+                <image
+                  class="header_icon"
+                  v-if="isWhite"
+                  src="../../static/icon_back_white.png"
+                  mode="aspectFit"
+                ></image>
+                <image
+                  class="header_icon"
+                  v-else
+                  src="../../static/icon_back_black.png"
+                  mode="aspectFit"
+                >
+                </image>
+              </view>
+              <text
+                class="header_left_line"
+                :class="[isWhite ? 'header_colorWhite_left_line' : '']"
+                v-if="isTwoBtn"
+              ></text>
+              <view
+                class="header_left_home"
+                :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
+                v-if="(firstPage && back) || home"
+                @click="onBackHome"
+              >
+              
+                <image
+                  class="header_icon"
+                  v-if="isWhite"
+                  src="../../static/icon_home_white.png"
+                  mode="aspectFit"
+                ></image>
+                <image
+                  class="header_icon"
+                  v-else
+                  src="../../static/icon_home_black.png"
+                  mode="aspectFit"
+                >
+                </image>
+              </view>
+            </view>
+          </slot>
+          <view
+            class="header_title"
+            v-if="!titleCenter && ($slots.default || navTitle)"
+            :style="{ color: navFontColor }"
+          >
+            <slot>
+              <text :style="{ color: navFontColor }">{{ navTitle }}</text>
+			
+            </slot>
+          </view>
+        </view>
+        <view
+          class="header_title header_title_center"
+          v-if="titleCenter && ($slots.default || navTitle)"
+          :style="{ color: navFontColor }"
+        >
+          <slot>
+            <text :style="{ color: navFontColor }">{{ navTitle }}</text>
+          </slot>
+        </view>
+        <view class="header_right_info">
+          <slot name="right"></slot>
+        </view>
+      </view>
+    </view>
+    <view
+      class="header_transparentFixed header_fixed"
+      v-if="type == 'transparentFixed'"
+      :style="{
+        paddingTop: statusBarHeight + 'px',
+        color: navTransparentFixedFontColor,
+        opacity: 1 - transparentValue,
+        zIndex: transparentValue < 0.3 ? 100 : 90,
+      }"
+    >
+      <view class="header_content">
+        <view class="header_left_box">
+          <slot name="transparentFixedLeft">
+            <view
+              class="header_left_info header_transparentFixed_left_info"
+              :class="[
+                isWhite ? 'header_transparentFixed_colorWhite_left_info' : '',
+              ]"
+              v-if="back || $slots.left || home"
+            >
+              <view
+                class="header_left_back"
+                :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
+                v-if="back && !firstPage"
+                @click="onBackPage"
+              >
+                <image
+                  class="header_icon"
+                  v-if="isWhite"
+                  src="../../static/icon_back_white.png"
+                  mode="aspectFit"
+                ></image>
+                <image
+                  class="header_icon"
+                  v-else
+                  src="../../static/icon_back_black.png"
+                  mode="aspectFit"
+                >
+                </image>
+              </view>
+              <text class="header_left_line" v-if="isTwoBtn"></text>
+              <view
+                class="header_left_home"
+                :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
+                v-if="(firstPage && back) || home"
+                @click="onBackHome"
+              >
+                <image
+                  class="header_icon"
+                  v-if="isWhite"
+                  src="../../static/icon_home_white.png"
+                  mode="aspectFit"
+                ></image>
+                <image
+                  class="header_icon"
+                  v-else
+                  src="../../static/icon_home_black.png"
+                  mode="aspectFit"
+                >
+                </image>
+              </view>
+            </view>
+          </slot>
+          <view
+            class="header_title"
+            v-if="!titleCenter && (navTitle || $slots.transparentFixed)"
+            :style="{ color: navTransparentFixedFontColor }"
+          >
+            <slot name="transparentFixed">
+              <text :style="{ color: navTransparentFixedFontColor }">{{
+                navTitle
+              }}</text>
+            </slot>
+          </view>
+        </view>
+        <view
+          class="header_title header_title_center"
+          v-if="titleCenter && (navTitle || $slots.transparentFixed)"
+          :style="{ color: navTransparentFixedFontColor }"
+        >
+          <slot name="transparentFixed">
+            <text :style="{ color: navTransparentFixedFontColor }">{{
+              navTitle
+            }}</text>
+          </slot>
+        </view>
+        <view class="header_right_info">
+          <slot name="transparentFixedRight"></slot>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="type == 'fixed'"
+      :style="{ paddingTop: statusBarHeight + 'px' }"
+    >
+      <view class="header_station"></view>
+    </view>
+  </view>
+</template>
+<script>
+import { mainPagePath, homePath } from "@/config/componentConfig";
+//白色表达值
+const whiteList = [
+  "#FFF",
+  "#fff",
+  "#FFFFFF",
+  "#ffffff",
+  "white",
+  "rgb(255,255,255)",
+  "rgba(255,255,255,1)",
+];
+export default {
+  props: {
+    //是否显示返回按钮
+    // 1000 显示返回按钮
+    // 2000 不显示返回按钮
+    // 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
+    backState: {
+      type: [String, Number],
+      default: function () {
+        return 1000;
+      },
+    },
+    //是否显示返回首页按钮
+    // 1000 显示首页按钮
+    // 2000 不显示首页按钮
+    // 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
+    homeState: {
+      type: [String, Number],
+      default: function () {
+        return 2000;
+      },
+    },
+    //导航背景色，支持渐变
+    bgColor: {
+      type: [String, Array],
+      default: function () {
+        return "#FFFFFF";
+      },
+    },
+    // 导航背景色渐变角度
+    bgColorAngle: {
+      type: [String, Number],
+      default: function () {
+        return 90;
+      },
+    },
+    //导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
+    fontColor: {
+      type: String,
+      default: function () {
+        return "#000000";
+      },
+    },
+    navFontAlign: {
+      type: String,
+      default: function () {
+        return "center";
+      },
+    },
+    //标题是否居中
+    titleCenter: {
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
+    //标题
+    title: {
+      type: String,
+      default: function () {
+        return "";
+      },
+    },
+    //类型 fixed为固定 默认
+    // ordinary 普通的 不固定
+    // transparent 透明不固定的
+    //transparentFixed  透明固定的
+    type: {
+      type: String,
+      default: function () {
+        return "fixed";
+      },
+    },
+    //透明固定的时候字体颜色
+    transparentFixedFontColor: {
+      type: String,
+      default: function () {
+        return "#000000";
+      },
+    },
+    // 屏幕滑动距离顶部距离(透明固定导航比传)
+    scrollTop: {
+      type: Number,
+      default: function () {
+        return 0;
+      },
+    },
+    // 是否显示阴影
+    shadow: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {
+      //当前页面是否是第一个页面
+      firstPage: false,
+      //透明度值
+      transparentValue: 1,
+      //标题
+      navTitle: "",
+      //字体色
+      navFontColor: "#000000",
+      //背景色
+      navBgColor: "",
+      //透明底字体色
+      navTransparentFixedFontColor: "#000000",
+      // 导航栏高度
+      statusBarHeight: 0,
+      // 上次显示的导航栏颜色
+      lastFrontColor: "",
+      themeBgColorName: "",
+    };
+  },
+  computed: {
+    back() {
+      return this.backState == 1000 || this.backState == 3000;
+    },
+    home() {
+      return this.homeState == 1000;
+    },
+    //导航固定
+    navFixed() {
+      if (this.type == "transparentFixed" || this.type == "fixed") {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    //导航底部线是否显示
+    navShadow() {
+      if (this.bgColor && typeof this.bgColor == "string") {
+        return (
+          this.shadow &&
+          this.type !== "transparent" &&
+          whiteList.includes(this.bgColor)
+        );
+      } else {
+        return false;
+      }
+    },
+    //导航字体是否是白色颜色
+    isWhite() {
+      return whiteList.includes(this.navFontColor);
+    },
+    //右上角是否有两个按钮
+    isTwoBtn() {
+      return (
+        (this.backState == 1000 || this.backState == 3000) &&
+        this.homeState == 1000 &&
+        !this.firstPage
+      );
+    },
+  },
+  watch: {
+    title(val) {
+      this.navTitle = val;
+    },
+    fontColor(val) {
+      this.navFontColor = val;
+      this.settingColor();
+    },
+    bgColor(val) {
+      this.getNavBgColor(val);
+    },
+    transparentFixedFontColor(val) {
+      this.navTransparentFixedFontColor = val;
+    },
+    scrollTop(val) {
+      this.pageScroll({
+        scrollTop: val,
+      });
+    },
+  },
+  //第一次加载
+  created() {
+    this.navTitle = this.title;
+    this.navFontColor = this.fontColor;
+    this.getNavBgColor(this.bgColor);
+    this.navTransparentFixedFontColor = this.transparentFixedFontColor;
+    //获取手机状态栏高度
+    this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
+    const _this = this;
+    this.pageScroll({
+      scrollTop: this.scrollTop,
+    });
+    //获取所有页面
+    let currentPages = getCurrentPages();
+    let pageLen = currentPages.length;
+    //判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
+    if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
+      this.firstPage = true;
+    }
+  },
+  //方法
+  methods: {
+    //返回上一页面
+    onBackPage() {
+      if (this.backState == 3000) {
+        this.$emit("backClick");
+      } else {
+		this.$emit('back');
+        uni.navigateBack();
+      }
+    },
+    //返回首页
+    onBackHome() {
+      if (this.homeState == 3000) {
+        this.$emit("homeClick");
+      } else {
+        uni.switchTab({
+          url: '/pages/home/index',
+        });
+      }
+    },
+    pageScroll(e) {
+      if (this.type == "transparentFixed") {
+        if (e.scrollTop && e.scrollTop > 0) {
+          if (e.scrollTop > 180) {
+            this.transparentValue = 1;
+          } else {
+            this.transparentValue = e.scrollTop / 180;
+          }
+        } else {
+          this.transparentValue = 0;
+        }
+        this.settingColor();
+      }
+    },
+    // 获取导航背景颜色
+    getNavBgColor(val) {
+      if (typeof val == "string") {
+        if (this.type == "transparent") {
+          this.navBgColor = "";
+        } else if (/^#|rgb\(|rgba\(/.test(val)) {
+          this.navBgColor = "linear-gradient(90deg," + val + "," + val + ")";
+        } else {
+          this.themeBgColorName = val;
+          this.navBgColor = "";
+        }
+      } else if (Array.isArray(val) && val.length >= 2) {
+        let navBgColor = "linear-gradient(" + this.bgColorAngle + "deg";
+        val.forEach((item) => {
+          if (typeof item == "string") {
+            navBgColor += "," + item;
+          } else if (typeof item == "object") {
+            navBgColor += "," + item.color + " " + item.scale;
+          }
+        });
+        navBgColor += ")";
+        this.navBgColor = navBgColor;
+      }
+    },
+    //设置手机状态栏颜色
+    settingColor() {
+      let navColor = this.navFontColor;
+      if (this.type == "transparentFixed" && this.transparentValue <= 0.5) {
+        navColor = this.navTransparentFixedFontColor;
+      }
+      let frontColor = "#000000";
+      if (whiteList.includes(navColor)) {
+        frontColor = "#ffffff";
+      }
+      if (this.lastFrontColor == frontColor) {
+        return;
+      }
+      setTimeout(() => {
+        this.lastFrontColor = frontColor;
+        // 改变手机状态栏颜色
+        uni.setNavigationBarColor({
+          frontColor: frontColor,
+          backgroundColor: "#FFFFFF",
+        });
+      }, 150);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.header_content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  /* #ifdef MP */
+  padding-right: 190rpx;
+  box-sizing: border-box;
+  /* #endif */
+  width: 750rpx;
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-direction: row;
+  height: 88rpx;
+  position: relative;
+}
+
+.header_station {
+  height: 88rpx;
+}
+
+.header_shadow {
+  // border-style: solid;
+  // border-width: 2rpx;
+  // border-color: #f5f5f5;
+  box-shadow: 0 0 6rpx 0 #ddd;
+}
+
+.header_fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  z-index: 99;
+}
+
+.header_absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width: 750rpx;
+  background-color: transparent !important;
+}
+
+.header_left_box {
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  height: 88rpx;
+  flex: 1;
+}
+
+.header_left_line {
+  height: 30rpx;
+  width: 2rpx;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+.header_left_back {
+  width: 56rpx;
+  height: 100%;
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+}
+
+.header_icon {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.header_left_home {
+  width: 56rpx;
+  height: 100%;
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+}
+
+.header_left_info {
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  height: 56rpx;
+  margin-left: 16rpx;
+}
+
+.header_title {
+  height: 88rpx;
+  font-size: 32rpx;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  /* #ifndef APP-PLUS-NVUE */
+  white-space: nowrap;
+  display: flex;
+  overflow: hidden;
+  /* #endif */
+  /* #ifdef APP-PLUS-NVUE */
+  lines: 1;
+  max-width: calc(100vw - 100px) !important;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* #ifdef MP */
+  max-width: calc(100vw - 160rpx);
+  /* #endif */
+}
+
+.header_title_center {
+  position: absolute;
+  bottom: 0rpx;
+  left: 375rpx;
+  transform: translateX(-50%);
+}
+
+.header_right_info {
+  height: 88rpx;
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  flex-shrink: 0;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+}
+
+.header_btnMongol {
+  border-radius: 33rpx;
+  border-style: solid;
+  border-width: 2rpx;
+  border-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.7);
+  /* #ifndef APP-PLUS-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+
+.header_btnMongol_left_back,
+.header_btnMongol_left_home {
+  width: 70rpx;
+}
+
+.header_transparentFixed {
+  border-bottom-width: 0;
+  background-color: transparent;
+  background-image: transparent;
+}
+
+.header_transparentFixed_left_info {
+  border-style: solid;
+  border-width: 2rpx;
+  border-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 33rpx;
+  /* #ifndef APP-PLUS-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+
+.header_transparentFixed_colorWhite_left_info {
+  border-style: solid;
+  border-width: 2rpx;
+  border-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+//颜色白色
+.header_colorWhite_btnMongol {
+  border-style: solid;
+  border-width: 2rpx;
+  border-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.header_colorWhite_left_line {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+</style>

uni_modules/z-nav-bar/package.json

@@ -0,0 +1,79 @@
+{
+  "id": "z-nav-bar",
+  "displayName": "zhouWei-navBar 适用于 uni-app 项目的头部导航组件，支持V3编译、nvue编译",
+  "version": "2.0.5",
+  "description": "导航栏组件，主要用于头部导航，主流平台都支持。自动改变导航栏颜色和头部返回首页，支持nvue、V3",
+  "keywords": [
+    "导航栏",
+    "nvue",
+    "navBar",
+    "顶部导航"
+],
+  "repository": "https://github.com/zhouwei1994/uni-app-demo",
+  "engines": {
+    "HBuilderX": "^3.0.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": "465081029"
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/z-nav-bar/readme.md

@@ -0,0 +1,156 @@
+# zhouWei-navBar 适用于 uni-app 项目的头部导航组件，支持V3编译、nvue编译
+
+导航栏组件，主要用于头部导航，组件名：zhouWei-navBar
+
+本组件目前兼容微信小程序、H5、5+APP。其他平台没试过
+
+本组件支持模式：
+1. 普通固定顶部导航  
+2. 透明导航  
+3. 透明固定顶部导航 
+4. 不固定普通导航 
+5. 颜色渐变导航
+
+本组件内置特殊功能：
+1. fontColor字体颜色为白色的时候手机状态栏会自动显示白色，否则显示灰色
+2. 页面为第一个页面时左上角自动显示返回主页的图标(具体看组件：zhouWei-navBar/index.vue =>页面script)
+3. nvue页面必须在当前页面引入本组件才可以使用
+
+| `QQ交流群(607391225)`         | `微信交流群（加我好友备注"进群"）`                  |
+| ----------------------------|--------------------------- |
+|![QQ交流群](http://qn.kemean.cn//upload/202004/14/15868301778472k7oubi6.png)|![微信交流群](https://qn.kemean.cn/upload/202010/13/weiXin_group_code.jpg)|
+| QQ群号：607391225 |微信号：zhou0612wei|
+
+### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
+
+### 本组件全局配置（位置：zhouWei-navBar/index.vue =>页面script）
+1. 主页页面的页面路径
+2. 首页页面路径
+
+```
+// 主页页面的页面路径
+// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
+// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
+const mainPagePath = ["pages/navList"];
+//返回首页的地址
+const homePath = "/pages/navList";
+```
+
+### 在main.js引入组件，并注册全局组件
+```
+import zhouWeiNavBar from "@/components/zhouWei-navBar";
+Vue.component("nav-bar", zhouWeiNavBar);
+```
+
+### 或者在页面script中引入组件，并注册组件（nvue页面必须是这样引入）
+```
+import navBar from "@/components/zhouWei-navBar";
+export default {
+    components: {navBar}
+}
+```
+
+### 案例一
+默认特性：左上角有返回箭头，nav-bar导航固定在顶部、标题居中
+```
+<nav-bar>我的</nav-bar>
+```
+
+### 案例二
+特性：无返回箭头、字体色为白色、标题左对齐、nav-bar导航透明并不固定在顶部、右边插槽有按钮
+```
+<nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
+	<view class="icon_setUp" slot="right">设置</view>
+</nav-bar>
+```
+
+### 案例三：颜色渐变导航
+特性：颜色渐变导航
+```
+<nav-bar home :bgColor="['#f37402','#0f0']" bgColorAngle="90" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
+```
+
+### 案例四：颜色渐变导航
+特性：颜色渐变导航
+```
+<nav-bar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
+<!-- bgColor值 -->
+bgColorList:[
+	{color:"#f37402",scale:"0%"},
+	{color:"#0f0",scale:"20%"},
+	{color:"#f00",scale:"80%"},
+	{color:"#00f",scale:"100%"}
+]
+```
+
+### 案例五：滑动透明导航
+特性：有返回箭头、nav-bar导航透明并固定在顶部、透明状态字体为白色、页面想下滑动nav-bar导航条逐渐变白色、右边插槽有按钮
+```
+<nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
+	<view class="transparent_fixed_preview" slot="transparentFixedRight" @click="onPreview">预览</view> //透明状态下的按钮
+	<view class="preview" slot="right" @click="onPreview">预览</view> //不状态下的按钮
+</nav-bar>
+```
+```
+//设置滚动值方法一：
+data() {
+	return {
+		scrollTop:0
+	}
+},
+onPageScroll(e) {
+	this.scrollTop = e.scrollTop;
+}
+//设置滚动值方法二：
+onPageScroll (e) {
+	this.$refs.navBar.pageScroll(e);
+}
+```
+
+### 案例六：搜索框|地区选择
+特性：无返回箭头、nav-bar导航固定在顶部、地区选择、搜索框
+```
+<nav-bar backState="2000">
+	<view slot="left" class="address_select">深圳市</view>
+	<view slot="right" class="search_box" @click="onPageJump('/pages/home/search')">
+		<text class="icon_search"></text>
+		<text class="tips">搜索目的地/职位等</text>
+	</view>
+</nav-bar>
+```
+
+### 属性
+| 名称                        | 类型          | 默认值          | 描述                                               |
+| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
+| backState                   | String         | 1000          | 返回上一页面按钮,`1000` 显示返回按钮,`2000` 不显示返回按钮,`3000`自定义返回按钮方法，点击返回箭头后会发送一个`backClick`事件|
+| home                        | Boolean        | true          | 返回首页按钮（首页地址在源文件里配置）                |
+| bgColor                     | String，Array  | #FFF          | 导航背景颜色，值为数组的时候显示渐变颜色，`bgColor="themeBgColor"`的时候会调用全局`class="themeBgColor"`的样式|
+| bgColorAngle                | String，Number | 90            | 导航背景颜色渐变角度（`bgColor`为数组生效）              |
+| fontColor                   | String         | #000          | 导航字体颜色，（当颜色为白色的时候导航状态栏和图片为白色的）|
+| titleCenter                 | Boolean        | true          | 标题`title`居中                                       |
+| title                       | String         | --            | 标题`title`值                                         |
+| transparentFixedFontColor   | String         | #000          | 导航`type`类型为`transparentFixed`时透明状态下的字体颜色  |
+| type                        | String         | fixed         | 导航类型，可选：1.`fixed`固定导航 2.`ordinary`不固定导航 3.`transparent`透明不固定导航 4.`transparentFixed`透明固定导航|
+| scrollTop                   | Number         | 0             | 导航`type`类型为`transparentFixed`时页面滚动值（`具体看上面的案例五`）|
+| shadow                      | Boolean        | true          | 是否显示底边阴影                                     |
+
+### bgColor数组值为JSON的参数
+| 名称                        | 类型            | 默认值         | 描述                                               |
+| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
+| color                       | String         | --            | 渐变颜色值                                          |
+| scale                       | String         | --            | 渐变比例（百分比%）                                  |
+
+### 插槽
+| 名称                  | 描述                                                               |
+| ----------------------|-------------------------------------------------------------------|   
+| left                  | 左插槽                                                             |
+| default               | 中间标题插槽（`type`类型为`transparentFixed`时插槽只会穿透到实色背景下）   |
+| right                 | 右插槽                                                             |
+| transparentFixed      | 导航`type`类型为`transparentFixed`时透明状态下中间插槽                   |
+| transparentFixedRight | 导航`type`类型为`transparentFixed`时透明状态下右插槽                     |
+| transparentFixedRight | 导航`type`类型为`transparentFixed`时透明状态下右插槽                     |
+
+### 事件（type类型为transparentFixed时可用）
+| 名称             | 参数              | 描述                      |
+| -----------------|------------------ | --------------------------|
+| backClick        | 返回上一页按钮方法 | `backState=3000`时生效    |