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即可,有几个页签配置几个