无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ lyuif-nav-bar ] 顶部导航栏

时间:2020-09-19 23:16来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-nav-bar ] 顶部导航栏 # 效果预览 Demo img class= layer-pid= 图片id,可以不写layer-= data-cke-saved-src=../lib/img/demo/weapp/lyuif-weapp-v1_1_1_nav_bar--3.png src=../lib/img/demo/weapp/lyuif-weapp-v1_1_1_nav_bar--3.png al

V1.1.1 [ lyuif-nav-bar ] 顶部导航栏#

效果预览 Demo


参数说明 API
自动适配刘海 iphoneX满足各种机型适配需求的顶部导航栏
参数 说明 类型 默认值
tit 标题 Strting 标题
tit-blod 标题加粗 Boolean false
bor 是否显示下描边 Boolean true
l-tit 左侧小标题 Strting 返回
l-ico 左侧图标 Boolean true
r-tit 右侧小标题 Strting 搜索

Lyuif组件源码展示

  1. <lyuif-nav-bar
  2.     bor="{{true}}"
  3.     tit="标题"
  4.     tit-bold="{{true}}"
  5.     l-tit="返回"
  6.     l-ico="{{true}}"
  7. />
  8.  
自定义 Slot
支持 左侧、右侧、标题区域内容自定义内容容器
参数 说明 类型 默认值
left 自定义左侧区域内容 String /
right 自定义右侧区域内容 String /
tit 自定标题区域内容 String /

Lyuif组件源码展示

  1. <lyuif-nav-bar
  2.     slot="left"
  3. >
  4. <view slot="left">自定义左侧区域内容</view>
  5. <view slot="left">自定义左侧区域内容</view>
  6. </lyuif-nav-bar>
  7.  
事件 Events
 
参数 说明 类型 默认值
bind:ico 左侧图标点击事件 eventhandle /
bind:l 左侧区域事件 eventhandle /
bind:l 右侧区域事件 eventhandle /
bind:tit 标题点击事件 eventhandle /

Lyuif组件源码展示

  1. <lyuif-nav-bar
  2.     bind:ico="ico"
  3.     bind:l="left"
  4.     bind:r="right"
  5.     bind:tit="tit"
  6. />
  7.  
  8.  
  9. ({Page
  10.     ico(){
  11.     console.log('ico')
  12.     }
  13. })
  14.  
前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm