uniapp2

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

tabBar  封装实现导航栏  跳转  生命周期  双向绑定

---

提示：以下是本篇文章正文内容，下面案例可供参考

tabBar

color:刚开始的颜色

selectedColor:被选择后的颜色

borderStyle:边框

pagePath:页面路径

"tabBar": {
		"color": "#830a10",   
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#853eff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/ll.png",
			"text": "首页"
		}, {
			"pagePath": "pages/index/mine",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/ll.png",
			"text": "我的"
		}]
	}

导航栏

一

1建立components文件navigation.vue 组件

2引入

import navigation from '././compontents/navigation.vue'

3注册

compontents{

navigation

}

4使用

<navigation></navigation>

二 全局注册

1在main.js

2import navigation from '././compontents/navigation.vue'

3Vue.component('Navigation',Navigation)

页面跳转

1.uni.navigateTo

 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

                 uni.navigateTo({

                    url: '/pages/mine/mine'

                 });

 2.uni.redirectTo

// 关闭当前页面，跳转到应用内的某个页面。 删除一个页

                uni.redirectTo({

                    url: '/pages/mine/mine'

                });

 3.uni.reLaunch

// 关闭所有页面，打开到应用内的某个页面。 删除所有页

                 uni.reLaunch({

                    url: '/pages/mine/mine'

                 });

 4.uni.switchTab

跳转到底部tabbar页

                 uni.switchTab({

                    url: '/pages/mine/mine'

                });

生命周期

钩子函数

onLoad 首次加载

onShow每次都执行  onHide  onunLoad

双向绑定

v-mode

<input v-model="name" @input="inputName" type="text" 
placeholder="请输入你的姓名"  style="background: skyblue;"  />

可以获取输入框的值 如果想要获取值 只需要 this.定义的变量就可以拿到

 建立js文件

// 默认导出 export default  

// 1. 如果是默认导出 只能使用一次  export default

// 2. 如果你想导出多个 可以使用 按需导出   export  

// 3. 在.vue中使用的话 如果是默认  // import 引入的名字 from 文件路径    

// 4. 在.vue中使用的话 如果是按需  // import {引入的名字,引入的名字} from 文件路径

//默认导出
export default function getDate(){
	let date = new Date()
	let year = date.getFullYear()
	let mounth = date.getMonth()
	let day = date.getDate()
	let time = date.getHours()
	let min = date.getMinutes()
	let sec = date.getSeconds()
	let str = year + '-' + mounth +'-' + day + ' ' + time +':' + min + ':' + sec
	return str
}
//按需导出
export  function getTime(){
	let date = new Date()
	let year = date.getFullYear()
	let mounth = date.getMonth()
	let day = date.getDate()
	let time = date.getHours()
	let min = date.getMinutes()
	let sec = date.getSeconds()
	let str = year + '-' + mounth +'-' + day 
	return str
}

---