本文展示了使用uni-app框架构建的多个UI界面，包括登录、我的、粉丝列表、设置和热搜界面。源码详细展示了如何将UI设计转化为实际标签元素，涉及组件使用、页面跳转、数据传递和音频控制等功能。适合学习uni-app框架和移动应用开发的读者参考。
涉及Uniapp框架结构、UI图到界面标签元素的转换过程、标签Uniapp框架配置和Uniapp常见组件使用，熟练使用Uniapp常用API和Flex布局，熟练掌握页面跳转数据传参方法以及uniapp innerAudioContext接口调用和控制等Uniapp相关技术。
需要下载完整版源码文件可点下面链接自行下载
目录
先放结果图,界面太多了就放6个吧：
接下来放源码
界面一：登录界面
<template>
<view class="content">
<view class="userback">
<img src="../../static/tx.png">
<view class="userName">机器人</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="content">软件版本 </view>
<view class="action">2.0.0</view>
</view>
</view>
<view class="btn-row">
<button type="primary" class="primary" @tap="bindLogin">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
bindLogin() {
uni.navigateTo({
url: '../login/login',
});
},
}
}
</script>
<style>
.userback {
height: 216px;
background-image: url('../../static/love.png');
background-repeat: no-repeat;
background-size: 100%;
text-align: center
}
.userback img {
margin: auto;
border-radius: 51px;
margin-top: 21%;
width: 97px;
height: 97px;
}
.userName{
color: #111111;
font-size: 48rpx;
font-weight:bolder
}
.userOrgan{
}
uni-button[type=primary] {
margin: 0 4%;
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
}
.cu-list.menu-avatar>.cu-item {
height: 37px;
background:#fff;
}
.cu-list.menu-avatar>.cu-item .content {
background-color: #e0e0e0;
padding: 24rpx;
margin: 40rpx;
border:1 px solid #666;
text-align: center;
}
.cu-list.menu-avatar>.cu-item .action {
text-align: center;
}
.cu-list.menu-avatar {
height: 195px;
}
</style>界面二：我的
<template>
<view>
<view class="userback">
<img src="../../static/tx.png">
<view class="userName">机器人</view>
</view>
<view class="btn" @click="goguanzhu">我的博客</view>
<view class="btn" @click="gofans">粉丝列表</view>
<view class="btn"@click="goshoucang">实时热点</view>
<view class="btn"@click="gomyfriends">我的好友</view>
<view class="btn"@click="gomynews" >休闲娱乐</view>
<view class="btn"@click="gosnow" >视频推荐</view>
<view class="btn"@click="goset" >设置</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
gofans(){
uni.navigateTo({
url:"../fans/fans"
})
},
goshoucang(){
uni.navigateTo({
url:"../shoucang/shoucang"
})
},
goguanzhu(){
uni.navigateTo({
url:"../guanzhu/guanzhu"
})
},
gomyfriends(){
uni.navigateTo({
url:"../myfriends/myfriends"
})
},
gomynews(){
uni.switchTab({
url:"../news/news"
})
},
goset(){
uni.navigateTo({
url:"../set/set"
})
},
gosnow(){
uni.navigateTo({
url:"../snow/snow"
})
}
}
}
</script>
<style>
.userback {
height: 216px;
background-image: url('../../static/love.png');
background-repeat: no-repeat;
background-size: 100%;
text-align: center
}
.userback img {
margin: auto;
border-radius: 51px;
margin-top: 21%;
width: 97px;
height: 97px;
}
.userName{
color: #111111;
font-size: 48rpx;
font-weight:bolder
}
.btn{
background-color: #e0e0e0;
padding: 24rpx;
margin: 48rpx;
border: 1 px solid #666;
text-align: center;
}
</style>
界面三:粉丝列表界面
<template>
<view class="index">
<view class="new_box" style="margin-top: 20upx;">
<view class="bbox">
<view class="list-box" v-for="(item,index) in list" :key="index">
<view class="list-ed">
<image class="list-img" :src="item.src" mode="aspectFill"></image>
<view class="list-right">
<view class="list-head" @click="choice(index)">
<view :class="[item.selected?'selde':'noselde']">{{item.selected?"已关注":"未关注"}}<text :class="[item.selected?'selde-q':'noselde-q']"></text></view>
</view>
<view class="list-name">{{item.title}}</view>
<view class="list-da">
<view>简介：<text>{{item.course}}</text></view>
</view>
</view>
</view>
</view>
<view class="sure" @click="sure">确认</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
course_id: "001",
title: "刘某人",
course: "明天会更好",
selected: true,
src : "../../static/6.webp"
},
{
course_id: "002",
title: "命运的红粉",
course: "一分钟前通过你的关注",
selected: true,
src:"../../static/13.png"
},
{
course_id: "003",
title: "古城",
course: "此人很懒，什么都没写",
selected: false,
src:"../../static/4.png"
},
{
course_id: "004",
title: "美女子",
course: "此人很懒，什么都没写",
selected: false,
src:"../../static/8.png"
},
{
course_id: "005",
title: "负磁场",
course: "数据科学与大数据技术",
selected: false,
src:"../../static/12.png"
},
],
selectId:[],
};
},
methods: {
//选择课程
choice(index){
if(this.list[index].selected == true){
this.list[index].selected = false;
//取消选中时删除数组中的值
for(var i = 0; i < this.selectId.length; i++){
if(this.selectId[i] === this.list[index].course_id){
this.selectId.splice(i,1);
}
}
console.log("选中的值",this.selectId)
}else{
this.list[index].selected = true;
this.selectId.push(this.list[index].course_id)
console.log("选中的值",this.selectId)
}
},
//提交
sure(){
//提交选中的值
if(this.selectId.length==0){
alert("请选择消息");
return false;
}
var listIds = this.selectId.join(",")
console.log("提交的数据",listIds)
}
}
};
</script>
<style>
page{
background-color: #eee;
}
/* 已选择 */
.selde {
border: 1px solid black;
background: black;
color: #f0f0f0;
border-radius: 20upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 20upx;
padding: 0 10upx;
}
.selde-q {
width: 18upx;
height: 18upx;
border-radius: 50%;
background: #ffffff;
margin-left: 6upx;
}
/* 未选择 */
.noselde {
border: 1px solid #959595;
background: #FFFFFF;
color: #959595;
border-radius: 20upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 20upx;
padding: 0 10upx;
}
.noselde-q {
border: 1px solid #959595;
width: 16upx;
height: 16upx;
border-radius: 50%;
background: #FFFFFF;
margin-left: 6upx;
}
.list-box {
display: flex;
flex-direction: column;
background-color: #fff;
margin: 0upx 16upx 16upx 16upx;
padding: 16upx;
border-radius: 10upx;
}
.list-ed {
font-size: 40rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.list-left {
margin-right: 16upx;
}
.list-img {
width: 160upx;
height: 160upx;
margin: 0upx 16upx 0upx 0upx;
}
.list-right {
display: flex;
flex-direction: column;
width: 510upx;
height: 180upx;
}
.list-right-img {
width: 140upx;
height: 38upx;
}
.noadsop {
width: 120upx;
height: 32upx;
}
.list-head {
display: flex;
justify-content: flex-end;
margin-bottom: 10upx;
}
.list-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 10upx;
}
.list-da {
display: flex;
flex-direction: row;
font-size: 26upx;
}
.list-da view {
width: 50%;
}
.list-da view text {
color: f0f0f0;
}
.sure {
background: #FF6000;
color: #FFFFFF;
width: 600upx;
height: 70upx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40upx;
margin: 60upx auto;
}
</style>界面四：设置界面
<template>
<view>
<view class="zh">播放和下载</view>
<view class="play0">
<view class="play" v-for="(user,i) in listObj" :key="i">
<view class="play1">
{{user}}
</view>
<switch checked />
</view>
<view class="zh">账号和隐私</view>
<view class="play2">账号和绑定设置</view>
<view class="play2">会员登录设备管理</view>
<view class="play2">消息和隐私设置</view>
<view class="play2">登录保护</view>
<view class="play2">系统权限设置</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
listObj: [
"边听边存 ",
"自动进入播放页",
"播放页自动播放影片",
"直播内容推荐"
],
}
},
methods: {
}
}
</script>
<style>
.zh{
margin-top: 16rpx;
text-indent: 16rpx;
}
.play {
display: flex;
background-color: #ffffff;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
border-bottom: 1rpx solid #e0e0e0;
}
.play1 {
margin: 1upx 10rpx;
line-height: 140rpx;
text-align: left;
color: #777;
font-size: 32rpx;
}
.play2 {
margin: 1upx 10rpx;
line-height: 140rpx;
text-align: left;
color: #777;
font-size: 32rpx;
text-indent: 24rpx;
background-color: #ffffff;
border-bottom: 1rpx solid #e0e0e0;
}
.background {
display: flex;
}
.uni-list-cell-db {
width: 500px;
}
.ll1 {
align-items: flex-end;
}
</style>
界面五：热搜界面
需要下载完整版源码文件可点下面链接自行下载
界面六：我的好友
点击相应的好友可以进入个人资料界面等
需要下载完整版源码文件可点下面链接自行下载
⭐⭐⭐创作不易.....
⭐⭐⭐如果对您有帮助留下的每一个点赞、收藏、关注是对菜鸡创作的最大鼓励❀
⭐⭐⭐有相关问题可以写在评论区，一起学习，一起进步。
扫一扫
8663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
