uni-app实战教程-----H5移动app以及小程序(三)---页面跳转以及底部选项

代码哈士奇

发布于 2021-01-29 13:06:27

1.4K0

发布于 2021-01-29 13:06:27

文章被收录于专栏：dmhsq_csdn_blog

新建页面

右键你的项目点击新建页面自己命名即可这里为mine

建好后在 pages.json能看到已被自动添加页面

底部选项卡

官方文档地址 https://uniapp.dcloud.io/collocation/pages?id=tabbar 参考文档给出属性按照自己需求即可

选项图标获取

阿里矢量图 https://www.iconfont.cn/ 大家可以根据自己的喜欢去下载比如我们要下载主页选项图标

下载两个颜色一个亮色一个暗色

重新命名文件亮色为 home 暗色为 no-home

在static 目录下新建image目录将图片拷贝进去

同理可得 mine

这里我们一共两个页面一个当主页一个当我的

选项卡

在pages.json 根目录下添加 tabBar 官方文档地址 https://uniapp.dcloud.io/collocation/pages?id=tabbar 有H5基础或者英文基础应该都能看懂看不懂去看文档

"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#3cc51f",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/image/no-home.png",
	        "selectedIconPath": "static/image/home.png",
	        "text": "首页"
	    }, {
	        "pagePath": "pages/mine/mine",
	        "iconPath": "static/image/no-mine.png",
	        "selectedIconPath": "static/image/mine.png",
	        "text": "我的"
	    }]
	}

效果如下

页面跳转传参

uni.navigateTo(OBJECT) 官方文档 https://uniapp.dcloud.io/api/router?id=navigateto

这里我们新建一个页面 test

在主页也就是 pages/index/index.vue中编写函数

我们给图片添加了点击事件 goTest()

goTest()中我们要跳转 test页面 (注意tarBar页面不能用这个而要用uni.switchTab(OBJECT))

goTest(){ uni.navigateTo({ url:’…/test/test?name=哈士奇’ 跳转test页面并且传参?后是传参格式 ?key1=value1$key2=value2… }) }

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="goTest()"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			goTest(){
				uni.navigateTo({
					url:'../test/test?name=哈士奇'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

接收参数

在我们跳转的页面 test中在onLoad生命页面生命周期中接收参数 onLoad(xxxx){ console.log(xxx.key1) // value1 console.log(xxx.key2) // value2 this,name = xxxx.name //赋值给页面data的name }

<template>
	<view>
		<text>{{name}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:""
			}
		},
		onLoad(option) {
			this.name = option.name
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

效果如下