app小程序设计 第1篇
在uni-app中设计个人中心页面,通常需要考虑以下步骤:
1.页面布局规划
分析个人中心需要展示的内容,如头像、昵称、积分、订单、收藏、设置等。
设计合理的布局,通常采用顶部导航栏、底部导航栏和中间内容区的结构。
2.创建页面结构
创建一个新的Vue组件,例如命名为。在组件中设置基本的HTML结构。
3.样式设计
使用CSS(如SCSS、Less等预处理器)来定义样式,确保跨平台兼容性。
应用uni-app的CSS变量和组件样式,如uni-row和uni-col来创建网格布局。
使用uni-icons组件添加图标。
4.组件化
这一步非必须,根据需要,将可复用的部分(如订单列表、个人资料卡片等)拆分为单独的组件。例如,创建一个用于展示用户基本信息。
5.数据绑定
通过data属性定义页面需要的数据。
使用v-model或props从父组件传递数据。
使用()获取服务器数据。
6.交互逻辑
app小程序设计 第2篇
简单介绍下Flex布局。Flex布局很强大,与传统的布局方式相比,Flex布局的语法和理解起来更加简单,容易上手。Flex布局可以方便地实现多列等高布局。Flex布局支持各种对齐方式,包括水平和垂直对齐,并且可以通过设置order属性对子元素进行排序。
flex的6 个属性:
flex-direction:决定主轴的方向。
flex-wrap:如果一条轴线排不下,如何换行。
flex-flow:flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content:定义项目在主轴上的对齐方式。
align-items:定义项目在交叉轴上如何对齐。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-direction属性:
flex-direction属性决定主轴的方向(即项目的排列方向)。
app小程序设计 第3篇
一般如果有UI设计人员的话,都会给出一个效果图和图片素材,帮你切好图片资源。如果没有效果图,则根据自己的设想,参考一些其它APP的个人中心页面,分析下界面内容和布局,最后实现自己的设计。
通过分析,可以知晓大致有哪些内容,需要什么布局结构等。接下来开始实现过程。
把整体页面分为几个部分:
头部模块中间的区域模块,统计模块和下方的item条目模块。
wrapper整体页面的样式设计,css样式类wrapper和头部样式设计。
注意style后面别忘加scoped和lang属性。
在Vue组件的
.center_top是个flex布局,内部包含center_img和center_info的横向排列。所以center_top的flex-direction应设置为 row,横向排列。center_info又包含昵称和vip会员等级显示内容,是个纵向的布局关系。
头像和显示昵称的flex布局样式:
其中会员的显示有个钻石的icon的图标,这个有现成的uni-icon可以用。
主要用于个具有弹性和居中对齐的容器.count,并且包含两种类型的子元素.cell和.text,它们有自己的样式和布局特性。这样的设计可能用于显示数量、统计或其他需要分组的文本信息。
.count
设置为display: flex;,意味着这个元素将作为一个弹性容器,其子元素将按照弹性布局排列。
margin: 0 20rpx;设置上下无边距,左右边距为20rpx,提供内缩的视觉效果。
text-align: center;使.count内的文本居中对齐。
border-radius: 4rpx;给.count添加4rpx的圆角,提升视觉效果。
position: relative;将.count设置为相对定位,以便后续可以使用绝对定位相对于它自身进行定位。
top: 10rpx;将.count向上偏移10rpx,可能会与其他元素产生位置关系。
没有指定flex-direction,则默认是横向排列,与flex-direction: row等同。
.cell
是.count内的子元素,设置margin-top: 10rpx;为其添加顶部边距。
.cell的flex: 1;表示在弹性布局中,分配剩余空间,使得它能自适应容器宽度。
.cell的padding-top: 20rpx;设置内部顶部填充,提供与内容的距离。
.text
.text是另一个嵌套的子元素
display: block;确保它作为独立的块级元素显示。
块级元素的特点是它们会在垂直方向上占据一整行,彼此之间默认有换行。块级元素可以设置宽度(width)和高度(height),而行内元素通常不能直接设置宽高(除非使用display: inline-block;或float)。块级元素的宽度默认是其父元素的100%,除非另有指定。有时候还可用于清除浮动元素的影响,例如,通过在非浮动的兄弟元素上使用display: block;来确保它们不会跟随浮动元素。
display: block;是布局和设计中一个非常基础且重要的工具,它允许开发者更好地控制元素的外观和布局。
这部分内容简单,用uni-list-item组件可以用。如果不加样式,看到的是上图红框中的效果,这跟设计的不符合,所以也需要设计下样式。