uni-app实战笔记

6 悬浮按钮移动
这个从文心一言下载的代码，可以运行，但浏览器中拖动不了
5 combox联动
先看基础应用，发现有问题

<uni-forms-item label="关系" name="relation">
				<uni-combox v-model="formData.relation" :candidates="PersonRelationEnumList"></uni-combox>
			</uni-forms-item>

export const PersonRelationEnumList = [
	{text:'自己',value:'0'},
	{text:'父母',value:'1'},
	{text:'夫妻',value:'2'},
	{text:'子女',value:'3'},
	{text:'兄弟',value:'4'},
	{text:'朋友',value:'5'}
]

可是看到效果却令人咂舌，怎么跟element不一样呢？怎么把

其实是用错了，因为不是这个控件，应该采用的是uni-data-select，这个跟我理解的combox不一样。

<uni-data-select v-model="formData.relation" :localdata="PersonRelationEnumList"></uni-data-select>

4 form表单
js和ts中写代码的模式有几种，一方面很灵活，另一方面也会感觉到困惑。因为要记得很多，你还得灵活切换，麻烦。
uni-app使用了vue3模板，但是写法还是vue2那一套。这里就需要使用setup语法糖


使用ts，感觉就顺眼多了，有了新模式，有几人愿意去维护旧的代码呢，这个就是搞开发的现状。

<template>
	<view class="uni-container">
		<uni-forms ref="formRef" :model-value="formData" :rules="rules" label-align="right">
			<uni-forms-item label="昵称" name="nickname" required>
				<uni-easyinput type="text" v-model="formData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="sex" required>
				<uni-data-checkbox v-model="formData.sex" :localdata="SexEnumList"></uni-data-checkbox>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import {SexEnumList} from '@/common/enum'
	const formData = ref({
		nickname:'',
		sex:'00'
	})
	const rules = ref({
		nickname:{
			rules:[
				{required:true,errorMessage:'请输入昵称'},
				{minLength:3,maxLength:5,errorMessage:'姓名长度在 {minLength} 到 {maxLength} 个字符'},
			]
		}
	})
	const save = async () =>{
		
	}
</script>

export const SexEnumList = [
	{text:'男',value:'00'},
	{text:'女',value:'01'}
]

3 页面跳转
点击【成员列表】进入到子页面，这里就涉及到页面跳转。

路由是基础并不难，但是路由跳转的方式比较灵活，这里就需要记录一下。有一点是需要配置的，就是在pages.json中需要将路由整理好，否则页面是无法跳转的

第一种配置方法，是在uni-list-item中配置相对路径的字符串。

第二种方法是根据api进行页面跳转

2 九宫格
这里使用深度选择器，调整字体居中的位置

<template>
	<view class="uni-container">
		<uni-grid :column="3">
			<uni-grid-item>
				<text>性格</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>婚姻</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>子女</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>父母</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>福德</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>疾厄</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>财帛</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>官禄</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>兄弟</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>朋友</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>相貌</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>才华</text>
			</uni-grid-item>
		</uni-grid>
		<uni-fab horizontal="right" vertical="bottom" direction="vertical"></uni-fab>
	</view>
</template>

<script>
</script>

<style>
	:deep(.uni-grid-item__box){
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
</style>

1 主菜单
主菜单在pages.json中配置对应的json即可，有几个页签配置几个