创新互联小程序教程:微信小程序WeUI·导航组件

Navigation

Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。

专注于为中小企业提供成都网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业加格达奇免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

示例代码:

{
    "usingComponents": {
        "mp-navigation-bar": "../components/navigation-bar/navigation-bar"
    },
    "navigationStyle": "custom",
    "navigationBarTitleText": "UI组件库"
}



    
        Navigation
        小程序自定义导航栏
    
    
        
        
        
        
        
    

Page({
  data: {
    loading: false,
    color: '#000',
    background: '#f8f8f8',
    show: true,
    animated: false
  },
  toggleLoading() {
    this.setData({
      loading: !this.data.loading
    })
  },
  changeColor() {
    this.setData({
      color: '#07C160'
    })
  },
  changeBgColor() {
    this.setData({
      background: '#ededed'
    })
  },
  toggleShow() {
    this.setData({
      show: !this.data.show
    })
  },
  toggleAnimated() {
    this.setData({
      animated: !this.data.animated,
      show: !this.data.show
    })
  }
})

属性列表

属性 类型 默认值 必填 说明
ext-class string 添加在组件内部结构的class,可用于修改组件内部的样式
title string 导航标题,如果不提供,则名为center的slot有效
back boolean true 是否显示返回按钮,默认点击按钮会执行navigateBack,如果为false,则名为left的slot有效
delta number 1 当back为true的时候有效,表示navigateBack的delta参数
background string #f8f8f8 导航背景色
color string 导航颜色
loading boolean 是否显示标题左侧的loading
show boolean 显示隐藏导航,隐藏的时候navigation的高度占位还在
animated boolean 显示隐藏导航的时候是有opacity过渡动画
bindback eventhandler 在back为true时,点击back按钮触发此事件,detail包含delta

Slot

名称 描述
left 左侧slot,在back按钮位置显示,当back为false的时候有效
center 标题slot,在标题位置显示,当title为空的时候有效
right 在导航的右侧显示

Tabbar

Tabbar组件,也可以用来作为小程序的自定义Tabbar使用

示例代码:

{
  "usingComponents": {
    "mp-tabbar": "../components/tabbar/tabbar"
  },
  "navigationBarTitleText": "UI组件库"
}


    
        Tabbar
        类似小程序原生tabbar的组件,可用于自定义tabbar
    
    

Page({
    data: {
        list: [{
            "text": "对话",
            "iconPath": "../../images/tabbar_icon_chat_default.png",
          "selectedIconPath": "../../images/tabbar_icon_chat_active.png",
            dot: true
        },
        {
            "text": "设置",
          "iconPath": "../../images/tabbar_icon_setting_default.png",
          "selectedIconPath": "../../images/tabbar_icon_setting_active.png",
            badge: 'New'
        }]
    },
    tabChange(e) {
        console.log('tab change', e)
    }
});

属性列表

属性 类型 默认值 必填 说明
ext-class string 添加在组件内部结构的class,可用于修改组件内部的样式
list array Tabbar的项的数组,按照规范,至少要有2个Tabbar项
current number 0 当前选中的Tabbar项的下标
bindchange eventhandler Tabbar项发生改成的时候触发此事件,detail为{index, item},index是Tabbar下标,item是对应的Tabbar项的配置

list属性是对象数组,每一项表示一个Tabbar项,其字段含义为

字段名 类型 默认值 必填 说明
text string Tabbar项的标题
iconPath string Tabbar项的icon图片路径,建议使用绝对路径,相对路径要相对于组件所在目录的。
selectedIconPath string Tabbar项选中时的icon,建议使用绝对路径,相对路径要相对于组件所在目录的。
badge string 是否显示Tabbar的右上角的Badge

分享文章:创新互联小程序教程:微信小程序WeUI·导航组件
URL分享:http://www.shufengxianlan.com/qtweb/news16/35766.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联