小程序开发必备功能的吐血整理个人中心界面样式大全
Posted 陶人超有料
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序开发必备功能的吐血整理个人中心界面样式大全相关的知识，希望对你有一定的参考价值。
📌个人主页：个人主页
🧀 推荐专栏：小程序开发成神之路 --(这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻)
📝作者简介：一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。
⭐️您的小小关注是我持续输出的动力！⭐️
干货内容推荐
🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：
文章目录
一、引言
个人中心界面是小程序开发中，底部tarbar的必备元素之一！用户信息也是每个小程序必须要精心维护的重中之重！
想要给用户带来高级且享受的用户体验，一个设计精美、交互流畅的个人中心界面就显得尤为重要。
为此，我总结了这么多年来的小程序开发经验，吐血整理出了每个小程序开发者必备的开发精囊，不收藏就会后悔的那种！
二、样例展示
| 样式名称 | 样式效果 | 源码代号 |
|---|---|---|
商城样式A |  | Code 1-1 |
通用样式A |  | Code 1-2 |
通用样式B |  | Code 1-3 |
通用样式C |  | Code 1-4 |
通用样式D |  | Code 1-5 |
通用样式E |  | Code 1-6 |
电商样式B |  | Code 1-7 |
电商样式C |  | Code 1-8 |
会员中心样式A |  | Code 1-9 |
会员样式B |  | Code 1-10 |
通用样式G |  | Code 1-11 |
三、源码分享
在上个章节所提及的界面效果中，其类型从娱乐交友、生活购物覆盖到了各个应用场景。其中一些通用的样式效果，由于其元素的结构适合各个场景，因此在我的日常开发中，经常拿他们来魔改，从而打到我想要的效果。
以下是每个样例的详细代码,请君自取：
3.1 Code 1-1
<template>
<view>
<view class="header" v-bind:class="'status':isH5Plus">
<view class="userinfo">
<view class="face">
<image :src="userinfo.face"></image>
</view>
<view class="info">
<view class="username">userinfo.username</view>
<view class="integral">积分:userinfo.integral</view>
</view>
</view>
<view class="setting">
<image src="/static/other/10.png"></image>
</view>
</view>
<view class="orders">
<view class="box">
<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
<view class="icon">
<view class="badge" v-if="row.badge>0">row.badge</view>
<image :src="row.icon"></image>
</view>
row.name
</view>
</view>
</view>
<view class="list" v-for="(list,list_i) in severList" :key="list_i">
<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="'noborder':li_i==list.length-1"
hover-class="hover" :key="li.name">
<view class="icon">
<image :src="li.icon"></image>
</view>
<view class="text">li.name</view>
<image class="to" src="/static/other/youjiantou.png"></image>
</view>
</view>
<soure :url="url"></soure>
</view>
</template>
<script>
export default
data()
return
url: 'https://ext.dcloud.net.cn/plugin?id=105',
//#ifdef APP-PLUS
isH5Plus: true,
//#endif
//#ifndef APP-PLUS
isH5Plus: false,
//#endif
userinfo: ,
orderTypeLise: [
//name-标题 icon-图标 badge-角标
name: '待付款',
icon: '/static/other/1.png',
badge: 99
,
name: '待发货',
icon: '/static/other/2.png',
badge: 2
,
name: '待收货',
icon: '/static/other/3.png',
badge: 6
,
name: '待评价',
icon: '/static/other/4.png',
badge: 9
,
name: '退换货',
icon: '/static/other/5.png',
badge: 0
],
severList: [
[
name: '我的收藏',
icon: '/static/other/6.png'
,
name: '优惠券',
icon: '/static/other/7.png'
,
name: '红包',
icon: '/static/other/8.png'
,
name: '任务',
icon: '/static/other/9.png'
,
],
[
name: '积分明细',
icon: '/static/other/1.png'
,
name: '抽奖',
icon: '/static/other/2.png'
,
name: '收货地址',
icon: '/static/other/3.png'
]
],
;
,
onLoad()
//加载
this.init();
,
methods:
init()
//用户信息
this.userinfo =
face: '/static/other/1.png',
username: "VIP会员10240",
integral: "1435"
,
//用户点击订单类型
toOrderType(index)
uni.showToast(
title: this.orderTypeLise[index].name
);
,
//用户点击列表项
toPage(list_i, li_i)
uni.showToast(
title: this.severList[list_i][li_i].name
);
</script>
<style lang="scss">
page
background-color: #fff
.header
&.status
padding-top: var(--status-bar-height);
background-color:#ff6364;
width:92%;
height:30vw;
padding:0 4%;
display:flex;
align-items:center;
.userinfo
width: 90%;
display: flex;
.face
flex-shrink: 0;
width: 15vw;
height: 15vw;
image
width: 100%;
height: 100%;
border-radius: 100%
.info
display: flex;
flex-flow: wrap;
padding-left: 30upx;
.username
width: 100%;
color: #fff;
font-size: 40upx
.integral
display: flex;
align-items: center;
padding: 0 20upx;
height: 40upx;
color: #fff;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 20upx;
font-size: 24upx
.setting
flex-shrink: 0;
width: 6vw;
height: 6vw;
image
width: 100%;
height: 100%
.hover
background-color: #eee
.orders
background-color: #ff6364;
width: 92%;
height: 11vw;
padding: 0 4%;
margin-bottom: calc(11vw + 40upx);
display: flex;
align-items: flex-start;
border-radius: 0 0 100% 100%;
margin-top: -1upx;
.box
width: 98%;
padding: 0 1%;
height: 22vw;
background-color: #fefefe;
border-radius: 24upx;
box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
margin-bottom: 40upx;
display: flex;
align-items: center;
justify-content: center;
.label
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap;
width: 100%;
height: 16vw;
color: #666666;
font-size: 26upx;
.icon
position: relative;
width: 7vw;
height: 7vw;
margin: 0 1vw;
.badge
position: absolute;
width: 4vw;
height: 4vw;
background-color: #ec6d2c;
top: -1vw;
right: -1vw;
border-radius: 100%;
font-size: 20upx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
image
width: 7vw;
height: 7vw;
z-index: 9;
.list
width: 100%;
border-bottom: solid 26upx #f1f1f1;
.li
width: 92%;
height: 100upx;
padding: 0 4%;
border-bottom: solid 1upx #e7e7e7;
display: flex;
align-items: center;
&.noborder
border-bottom: 0
.icon
flex-shrink: 0;
width: 50upx;
height: 50upx;
image
width: 50upx;
height: 50upx
.text
padding-left: 20upx;
width: 100%;
color: #666
.to
flex-shrink: 0;
width: 40upx;
height: 40upx
</style>
3.2 Code 1-2
<template>
<view class="center">
<view class="center_top"></view>
<!--头部用户信息-->
<view class="avatar_box">
<open-data class="avatar" type="userAvatarUrl"></open-data>
<open-data class="nickname" type="userNickName"></open-data>
</view>
<view class="center_box_bg">
<!--主菜单-->
<view class="profily">
<view class="home_menu">
<view class="cell" v-for="(item,index) in homeMenu" :key="index">
<image class="img" :src="item.img" mode="aspectFill"></image>
<text :class="index==1?'special':''">item.name</text>
</view>
</view>
</view>
<!--两边圆弧-->
<view class="arc">
<view class="within_arc"></view>
</view>
<!--列表菜单-->
<view class="list_menu">
<view class="row" v-for="(item,index) in listMenu" :key="index">
<image :src="item.icon" mode="aspectFill"></image>
<以上是关于小程序开发必备功能的吐血整理个人中心界面样式大全的主要内容，如果未能解决你的问题，请参考以下文章