帮我把这个uniapp的代码写出来
时间: 2023-08-12 20:04:37 浏览: 164
当然,下面是一个简单的UniApp代码示例,按照你的要求实现了个人信息页面,包含登录注册跳转、学号、姓名、头像、学校、成绩、绩点等按钮。
首先,在项目的`pages`目录下创建`personalInfo`页面文件夹,并在该文件夹下创建以下文件:
1. 在`personalInfo`页面文件夹下创建`loginRegister.vue`文件,代码如下:
```vue
<template>
<div>
<button @click="goToLogin">登录</button>
<button @click="goToRegister">注册</button>
</div>
</template>
<script>
export default {
methods: {
goToLogin() {
uni.navigateTo({
url: '/pages/personalInfo/login.vue'
});
},
goToRegister() {
uni.navigateTo({
url: '/pages/personalInfo/register.vue'
});
}
}
};
</script>
```
2. 在`personalInfo`页面文件夹下创建`userInfo.vue`文件,代码如下:
```vue
<template>
<div>
<uni-list>
<uni-list-item title="学号" @click="goToScore"></uni-list-item>
<uni-list-item title="姓名" @click="goToScore"></uni-list-item>
<uni-list-item title="头像" @click="goToScore"></uni-list-item>
<uni-list-item title="学校" @click="goToScore"></uni-list-item>
<uni-list-item title="成绩" @click="goToScore"></uni-list-item>
<uni-list-item title="绩点" @click="goToScore"></uni-list-item>
</uni-list>
</div>
</template>
<script>
export default {
methods: {
goToScore() {
uni.navigateTo({
url: '/pages/personalInfo/score.vue'
});
}
}
};
</script>
```
3. 在`personalInfo`页面文件夹下创建`login.vue`文件和`register.vue`文件,这里省略具体代码,根据你的需求实现登录和注册的功能。
4. 在`personalInfo`页面文件夹下创建`score.vue`文件,这里省略具体代码,根据你的需求实现成绩页面的展示。
最后,在需要跳转到个人信息页面的地方,使用`uni.navigateTo`方法进行页面跳转。比如在其他页面的某个按钮点击事件中:
```javascript
uni.navigateTo({
url: '/pages/personalInfo/userInfo.vue'
});
```
这样,你就可以使用UniApp来创建一个简单的个人信息页面了。记得根据实际需求修改和完善代码,并进行样式的美化。
阅读全文
相关推荐
















