uni-app学习小记--2

今日练习登陆界面制作：

一.首先学习的是登陆跳转的区别：

1）uni.navigateTo:

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

注：在跳转到下一个页面的时候在顶部会弹出返回按钮，如果想通过代码取消掉，本人亲测上午太好解决办法，可使用下文事件；

uni.navigateTo({
					url:"/pages/Index_first/Index_first"
				})

2）uni.redirectTo：

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

注：此方法跳转后子页面无返回按钮，看起来很不错。。。

uni.redirectTo({
					url:"/pages/Index_first/Index_first"
				})

3）uni.reLaunch：

关闭所有页面，打开到应用内的某个页面。（前面的全给你干掉了。。）

uni.reLaunch({
							url:"/pages/index/index",
})

 以上是常见的几个跳转事件，可以满足最基本的需求，

二.对于跳转的整体架构

如下所示：

uni.reLaunch({
							url:"/pages/index/index",
							success:res =>{},
							fail:() =>{},
							complete:() => {}
			})

 url：跳转路由，格式是加上页面的路径（可以按默认的来）

success：跳转成功事件

fail：跳转失败事件

complete：跳转完成事件

 三.登陆页面小练习制作

成品图（极丑。。。）：

代码如下：

<template>
	<view class="content">
		<!-- 标题 -->
		<view>
			<view><text>项目练习一</text></view>
		</view>
		<!-- 用户名模块 -->
		<view v-if="isActive==1">
			<uni-forms>
				<uni-forms-item label="用户名">
					<uni-easyinput placeholder="用户名" v-model="username"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="密码">
					<uni-easyinput placeholder="密码" v-model="password"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view :class="{'active':isActive==2}" @click="chenked(2)" class="phoneclass">手机号登录</view>
		</view>
		<!-- 手机号模块 -->
		<view v-if="isActive==2">
			<uni-forms>
				<uni-forms-item label="手机号">
					<uni-easyinput placeholder="手机号" v-model="username"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="验证码">
					<uni-easyinput placeholder="验证码" v-model="password"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view :class="{'active':isActive==1}" @click="chenked(1)" class="nameclass">用户名登录</view>
		</view>
		<view>
			<button @click="toFirst()">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive:1,
				boxOne:[],
				boxTwo:[],
				username:'',
				password:''
			}
		},
		onLoad() {

		},
		methods: {
			toFirst(){
				uni.redirectTo({
					url:"/pages/Index_first/Index_first"
				})
			},
			chenked(type){
				this.isActive = type
			}
		}
	}
</script>

<style>
	@import"login.css"
</style>