ThorUI文档

# tui-bottom-navigation 底部导航菜单 开源组件

介绍

Bottom Navigation：支持二级菜单，支持暗黑模式，可设置背景色，字体颜色，字体大小等基本样式。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiBottomNavigation from "@/components/thorui/tui-bottom-navigation/tui-bottom-navigation.vue"
export default {
	components:{
		tuiBottomNavigation
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 App-Nvue
✓ ✓ ✓ ✓ ✓ ✓ ✓ 升级中

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-bottom-navigation": "/components/thorui/tui-bottom-navigation/tui-bottom-navigation"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基本使用

通过 itemList 属性设置导航菜单，嵌套itemList数据即为二级菜单，传入数据为约定格式不可随意更改。

    <!--uni-app-->
<tui-bottom-navigation :itemList="itemList" @click="menu"></tui-bottom-navigation>

    // data 数据 及 方法
export default {
  data() {
  	return {
  		itemList: [{
  			text: '往期',
  			iconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
  			selectedIconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
  			color: '#666',
  			//1-选中切换，2-跳转、请求、其他操作，3-菜单
  			type: 3,
  			//自定义参数，类型自定义
  			parameter: null,
  			//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
  			popupLeft: '',
  			itemList: [
  				{
  					//不建议超过6个字，请自行控制
  					text: '全部文章',
  					//自定义参数，类型自定义
  					parameter: null
  				},
  				{
  					text: 'ThorUI小程序',
  					//自定义参数，类型自定义
  					parameter: null
  				}
  			]
  		},
  		{
  			text: '更多',
  			iconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
  			selectedIconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
  			color: '#666',
  			//1-选中切换，2-跳转、请求、其他操作，3-菜单
  			type: 3,
  			//自定义参数，类型自定义
  			parameter: null,
  			//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
  			popupLeft: '',
  			itemList: [
  				{
  					//不建议超过6个字，请自行控制
  					text: '打赏作者',
  					//自定义参数，类型自定义
  					parameter: null
  				},
  				{
  					text: '联系我们',
  					//自定义参数，类型自定义
  					parameter: null
  				},
  				{
  					text: 'ThorUI文档',
  					//自定义参数，类型自定义
  					parameter: null
  				}
  			]
  		}]
  	}
  },
  methods: {
  	menu(e) {
  		//菜单类型 主菜单/子菜单
  		let menuType = e.menu;
  		//主菜单索引
  		let index = e.index;
  		//1-选中切换，2-跳转、请求、其他操作，3-菜单
  		//操作自行约定好即可，传入参数 parameter,也可以直接取传入的itemList值
  	
  		//此处默认全部知晓菜单按钮以及相关操作，实际开发中可自行约定判断处理操作
  		let type = e.type;
  		if (menuType === 'main') {
  			// if(type==1){
  			// 	this.current=index;
  			// }
  			if (type == 2 && index == 1) {
  				console.log('打开小程序')
  			}
  		} else {
  			//子菜单索引
  			let subIndex = e.subIndex;
  			if (index == 0) {
  				if (subIndex == 0) {
  					console.log('全部文章')
  				} else {
  					console.log('打开小程序')
  				}
  			} else {
  				if (subIndex == 0) {
  					uni.previewImage({
  						urls: ['https://thorui.cn/img/reward.jpg']
  					});
  				} else if (subIndex == 1) {
  					//this.tui.xxx等api 查看 【快速上手】文档使用
  					this.tui.href('/pages/common/about/about');
  				} else {
  					const that = this;
  					const url = 'https://www.thorui.cn/doc';
  					// #ifdef H5
  					location.href = url;
  					// #endif
  	
  					// #ifndef H5
  					uni.setClipboardData({
  						data: url,
  						success(res) {
  							uni.getClipboardData({
  								success(res) {
  									that.tui.toast('文档链接已复制');
  								}
  							});
  						}
  					});
  					// #endif
  				}
  			}
  		}
  	}
  }
}

    <!--微信小程序-->
<tui-bottom-navigation itemList="{{itemList}}" bindclick="menu"></tui-bottom-navigation>

    // data 数据 及 方法
Page({
  data: {
    itemList: [{
    	text: '往期',
    	iconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
    	selectedIconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
    	color: '#666',
    	//1-选中切换，2-跳转、请求、其他操作，3-菜单
    	type: 3,
    	//自定义参数，类型自定义
    	parameter: null,
    	//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
    	popupLeft: '',
    	itemList: [
    		{
    			//不建议超过6个字，请自行控制
    			text: '全部文章',
    			//自定义参数，类型自定义
    			parameter: null
    		},
    		{
    			text: 'ThorUI小程序',
    			//自定义参数，类型自定义
    			parameter: null
    		}
    	]
    },
    {
    	text: '更多',
    	iconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
    	selectedIconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
    	color: '#666',
    	//1-选中切换，2-跳转、请求、其他操作，3-菜单
    	type: 3,
    	//自定义参数，类型自定义
    	parameter: null,
    	//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
    	popupLeft: '',
    	itemList: [
    		{
    			//不建议超过6个字，请自行控制
    			text: '打赏作者',
    			//自定义参数，类型自定义
    			parameter: null
    		},
    		{
    			text: '联系我们',
    			//自定义参数，类型自定义
    			parameter: null
    		},
    		{
    			text: 'ThorUI文档',
    			//自定义参数，类型自定义
    			parameter: null
    		}
    	]
    }]
  },
  menu(e) {
      //菜单类型 主菜单/子菜单
      let menuType = e.detail.menu;
      //主菜单索引
      let index = e.detail.index;
      //1-选中切换，2-跳转、请求、其他操作，3-菜单
      //操作自行约定好即可，传入参数 parameter,也可以直接取传入的itemList值
  
      //此处默认全部知晓菜单按钮以及相关操作，实际开发中可自行约定判断处理操作
      let type = e.detail.type;
      if (menuType === 'main') {
        if (type == 2 && index == 1) {
  		console.log('打开小程序')
        }
      } else {
        //子菜单索引
        let subIndex = e.detail.subIndex;
        if (index == 0) {
          if (subIndex == 0) {
  		   console.log('全部文章')
          } else {
  		  console.log('打开小程序')
          }
        } else {
          if (subIndex == 0) {
            wx.previewImage({
              urls: ['https://thorui.cn/img/reward.jpg']
            });
          } else if (subIndex == 1) {
  		   // 跳转页面
            // tui.href('/pages/common/about/about');
  		   console.log('跳转页面')
          } else {
            const url = 'https://www.thorui.cn/doc';
            // tui.copy(url,"文档链接已复制")
  		  console.log('文档链接已复制')
          }
        }
      }
    }
})

    // Make sure to add code blocks to your code group
    无二级菜单

    通过 itemList 属性设置导航菜单，没有二级菜单则不需要嵌套itemList数据，传入数据为约定格式不可随意更改。

      <!--uni-app-->
<tui-bottom-navigation :current="current" :itemList="itemList" @click="tabbar"></tui-bottom-navigation>

      // data 数据 及 方法
export default {
  data() {
  	return {
  		current:0,
  		itemList:[{
  			text: '首页',
  			color: '#666',
  			//1-选中切换，2-跳转、请求、其他操作，3-菜单
  			type: 1
  		},
  		{
  			text: '组件',
  			color: '#666',
  			//1-选中切换，2-跳转、请求、其他操作，3-菜单
  			type: 1
  		},
  		{
  			text: '我的',
  			color: '#666',
  			//1-选中切换，2-跳转、请求、其他操作，3-菜单
  			type: 1
  		}]
  	}
  },
  methods: {
  	tabbar(e) {
  		//其他逻辑自行处理
  		this.current = e.index;
  	}
  }
}

      <!--微信小程序-->
<tui-bottom-navigation current="{{current}}" itemList="{{itemList}}"  bindclick="tabbar"></tui-bottom-navigation>

      // data 数据 及 方法
Page({
  data: {
    current:0,
    itemList:[{
    	text: '首页',
    	color: '#666',
    	//1-选中切换，2-跳转、请求、其他操作，3-菜单
    	type: 1
    },
    {
    	text: '组件',
    	color: '#666',
    	//1-选中切换，2-跳转、请求、其他操作，3-菜单
    	type: 1
    },
    {
    	text: '我的',
    	color: '#666',
    	//1-选中切换，2-跳转、请求、其他操作，3-菜单
    	type: 1
    }]
  },
  tabbar(e) {
  	//其他逻辑自行处理
  	this.setData({
  	    current:e.detail.index
  	})
  }
})

      // Make sure to add code blocks to your code group

      # Slots

      插槽名称 插槽说明
      - -

      # Props

      属性名 类型 说明 默认值
      current Number 当前索引 0
      itemList Array 导航栏项集合 [ ]
      color String 字体颜色 #666
      selectedColor String 选中后字体颜色 #5677fc
      fontSize String 字体大小 28rpx
      bold Boolean 选中后字体是否加粗 true
      backgroundColor String 导航条背景颜色 #F8F8F8
      splitLineScale Boolean item分割线高度是否缩小 true
      subMenuColor String 二级菜单字体颜色 #333
      subMenufontSize String 二级菜单字体大小 28rpx
      subMenuBgColor String 二级菜单背景色 深色：#4c4c4c #fff
      subMenuHover Boolean 二级菜单是否有点击效果 true
      isFixed Boolean 是否固定在底部 true
      unlined Boolean 去除导航栏顶部的线条 false
      isDarkMode Boolean 是否暗黑模式 (true：所有设置颜色失效) false
      itemList 属性 Object参数说明
      属性名名 说明
      text 插槽名称，二级菜单text不建议超过6个字
      iconPath 图标地址
      selectedIconPath 选中后图标地址
      color 默认颜色
      type 1-选中切换，2-跳转、请求、其他操作，3-菜单
      parameter 自定义参数，类型自定义
      popupLeft 菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
      itemList 二级菜单，暂不支持图标，主要参数同一级菜单text

      # Events

      注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

      事件名 说明 回调参数
      click 菜单点击事件 菜单信息数据
      click事件回调参数说明
      {
	menu: 'sub', //main(主菜单),sub(子菜单)
	type: type, // 1-选中切换，2-跳转、请求、其他操作，3-菜单
	index: index, //主菜单索引值
	subIndex: subIndex,//子菜单索引值，无二级菜单则忽略此参数
	parameter: parameter //自定义参数 itemList属性中传入
}

      # 预览

      请以移动端效果为准，touch事件目前尚未在PC端做兼容。

      # 特别说明

      • 该组件为 开源组件，uni-app版所有用户均可免费使用。
      • 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

      # 线上程序扫码预览

      ThorUI组件库 H5二维码 ThorUI示例
      ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
      Last Updated: 1/20/2024, 6:31:45 PM

      ← tui-cascade-selection 级联选择 →