更新记录

1.1.2（2022-03-18） 下载此版本

去掉slot相关的值

1.1.1（2022-03-17） 下载此版本

处理app端出现错误提示问题

1.1.0（2022-03-08） 下载此版本

将原this.$store.getters.navbar 修改为 this.$store.state.zqNavbarSetting 修复非全局定义出现的BUG 修复穿透属性下出现背景色

平台兼容性

uni-app

其他

zq-navbar

组件使用说明

• 该组件使用的字体文件展示initBtn内的字体文字，需要到git下载字体文件方可正常使用

• 该组件默认向下滚动到400rpx自动隐藏滚动条，穿透时默认根据滚动距离0-300rpx渐变加深透明度0-1

• 该组件除了字体大小使用px全部使用的rpx单位

• 劳烦各位大佬点个收藏 git地址

• 字体文件为 [icon目录下的icon和appicon文件，里面含有其他字体文字],不需要单独引用，组件内含有字体问题，如需增加新的图标可将文件内的字体文件替换掉(http://39.105.116.130:8888/down/2f7qJEjfBQRi)

• 效果展示预览图

• template代码：

    <zq-navbar 
        v-model="scrollTop" 
        :props="{'navbarTitle':'知秋标题栏'}"
        :initBtn="[{name:'add'}]"
    >
        <template v-slot:left></template>
        <template v-slot:center></template>
        <template v-slot:right></template>
        <template v-slot:sidebar>该插槽为侧边栏插槽，配合initBtn中的sidebar使用</template>
    </zq-navbar>

组件属性的全局配置

• 在pages.json配置不使用原生导航栏

  "globalStyle": {
      "navigationBarTextStyle": "white",
      "navigationBarTitleText": "",
      "navigationBarBackgroundColor": "#F8F8F8",
      "backgroundColor": "#F8F8F8",
      "navigationStyle":"custom",
      "mp-alipay":{
         "transparentTitle": "always",
         "titlePenetrate": "YES"
      },
      "app-plus":{
          "titleNView":false
      }
  }

• 在main.js文件中定义$store

import store from './store';
Vue.prototype.$store = store;

• 在store的文件中添加以下内容，不使用的属性可不配置,单页面可通过:props设置

    const store = new Vuex.Store({
        state: {
            zqNavbarSetting:{
                penetrate:false,//是否穿透
                navbarPenetrateBackgroundColor:"",//穿透背景色
                isPenetrateScrollGradual:true,//是否跟随滚动高度渐变
                isPenetrateImageGradual:false,//图片穿透
                penetrateGradualMin:0,//渐变的最小值
                penetrateGradualMax:1,//渐变的透明度最大值
                penetrateGradualBackgroundColor:null,//渐变的背景色
                penetrateGradualMaxTop:300,//渐变的最终值
                navbarHeight:0,//状态栏高度
                navbarTitleHieght:88,//标题高度
                navbarNoneTitleHieght:20,//无标题时高度
                navbarColor:"#333333",//导航栏字体颜色
                navbarBackgroundColor:"#ffffff",//导航栏背景颜色
                navbarBackgroundImage:null,//导航栏背景图
                navbarBackgroundImageHeight:null,//导航栏背景图高度
                navbarBackgroundImageMode:"aspectFill",//导航栏背景图模式
                navbarBackgroundImageOpacity:1,//导航栏透明度
                navbarBorderBottom:null,//导航栏边框颜色
                navbarTitle:"",//导航栏标题
                navbarTitleFontSize:14,//标题字号大小
                hasBubble:false,//是否有气泡
                hasBoxShadow:false,//是否有阴影
                titleAlign:'center',//头部字体排列方式
                hasSearch:false,//是否显示搜索框
                showSearchBtn:true,//是否显示搜索按钮
                searchPrompt:"请输入搜索词",//搜索框提示语
                searchBtnText:"搜索",//搜索框按钮文字
                searchBtnColor:'',//搜索按钮的颜色
                searchBtnFontSize:null,//搜索按钮的字号
                searchBtnWidth:80,//搜索按钮宽度
                searchAlign:'left',//搜索框文字排列
                searchBackgroundColor:'#ffffff',//搜索框背景颜色
                searchBorderColor:"#cccccc",//搜索框边框颜色
                hasLocation:false,//是否使用定位
                locationText:null,//定位的文字
                latitude:0,//定位的纬度
                longitude:0,//定位的经度
                isBack:false,//是否返回
                hasHome:false,//是否返回首页
                homeUrl:"/pages/index/index",//首页的页面路由
                hideBtn:false,//是否隐藏所有的按钮
                hideTop:400,//隐藏的高度
                disabledToTop:false//禁用置顶
            }
        }
    })

• 全局监听页面滚动的方法，在main.js
• Scroll为on/Page/Scroll，不知道为啥被解析成Scroll

  Vue.mixin({
  data(){
      return{
          scrollTop:0
      }
  },
  onPageScroll(event) {//onPageScroll
      this.scrollTop = event.scrollTop;
  }
  })

当需要吸附tab组件时，可以通过该方式吸附

• 多个吸附对象如果不想前面的组件被后面的组件覆盖则设置top时应当将当前adsorbs['#box'].top加上前面所有吸附对象的总高
• 被吸附对象为主体内容，占位标签无内容标签，为防止页面出现闪动两个标签应当等高

<zq-navbar 
    v-model="scrollTop" 
    :props="{'navbarTitle':'知秋标题栏'}"
    :adsorbs="['#box']" 
    @getAdsorbs="getAdsorbs"
>
    <view class="box" id="box">
        <view class="box" 
            :style="{
                'position':'fixed',
                top:adsorbs['#box'].top + 'rpx'}" 
                v-if="adsorbs['#box'] && adsorbs['#box'].adsorb"
            >
            被吸附对象
        </view>
        <view class="box">
            被吸附对象占位标签，为避免出现闪动；后期会单独写一个吸顶组件，直接套用就好
        </view>
    </view>
</zq-navbar>

组件基本API参数

props的参数

initBtn的参数

• name为必传属性，如果不传其他属性默认使用内置属性
• initBtn长度大于2的时候，全部通过...隐藏，可点击...展开查看

initBtn:[
  {label:"新增",font:'&#xe6e7',iconClass:"icon-add",name:"add",type:'icon',url:"",methods:"click",class:""},//0
  {label:"编辑",font:'&#xe693',iconClass:"icon-edit",name:"edit",type:'icon',url:"",methods:"click",class:""},
  {label:"删除",font:"&#xe66b",iconClass:"icon-ashbin",name:"delete",type:'icon',url:"",methods:"click",class:""},
  {label:"完成",font:"&#xe6ee",iconClass:"icon-save",name:"save",type:'icon',url:"",methods:"click",class:""},
  {label:"扫码",font:"&#xe6cc",iconClass:"icon-scanning",name:"code",type:'icon',url:"",methods:"click",class:""},
  {label:"消息",font:"&#xe6b7",iconClass:"icon-notification",name:"news",type:'icon',url:"",methods:"click",class:""},//5
  {label:"刷新",font:"&#xe6c4",iconClass:"icon-refresh",name:"upDate",type:'icon',url:"",methods:"click",class:""},
  {label:"条形",font:"&#xe676",iconClass:"icon-chart-bar",name:"chart-bar",type:'icon',url:"",methods:"click",class:""},
  {label:"饼图",font:"&#xe676",iconClass:"icon-chart-pie",name:"chart-pie",type:'icon',url:"",methods:"click",class:""},
  {label:"设置",font:"&#xe6d4",iconClass:"icon-setting",name:"set",type:'icon',url:"",methods:"click",class:""},
  {label:"分享",font:'',iconClass:"icon-share",name:"share",type:'icon',url:"",methods:"click",class:""},//10
  {label:"菜单",font:"&#xe6dc",iconClass:"icon-toggle-right",name:"sidebar",type:'icon',url:"",methods:"click",class:""},
  {label:"返回",font:'&#xe6e8',iconClass:"icon-arrow-left-bold",name:"back",type:'icon',url:"",methods:"click",class:""},
  {label:"首页",font:'&#xe6a2',iconClass:"icon-home",name:"index",type:'icon',url:"",methods:"click",class:""},
  {label:"多选",font:'&#xe6b6',iconClass:"icon-keyboard-26",name:"select",type:'icon',url:"",methods:"click",class:""},
  {label:"",font:'',iconClass:"",name:"other",type:'font',url:"",methods:"click",class:""},//15
  {label:"电话",font:'&#xe6dd',iconClass:"icon-telephone",name:"phone",type:'icon',url:"",methods:"click",class:""},
  {label:"收藏",font:'&#xe69c',iconClass:"icon-fabulous",name:"fabulous",type:'icon',url:"",methods:"click",class:""},
  {label:"列表",font:'',iconClass:"icon-menu",name:"list",type:'icon',url:"",methods:"click",class:""},
  {label:"视图",font:'',iconClass:"icon-modular",name:"view",type:'icon',url:"",methods:"click",class:""}
]

组件事件