微信小程序个人中心-我的界面

微信小程序 专栏收录该内容
63 篇文章 3 订阅

个人中心-我的界面

简介

我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面,下面来看看效果图:
效果图
在这里插入图片描述

.
.
.
这种效果的整体布局固定不变,如果想要更好看的效果,可以修改里面的图片小图标,还有背景颜色,又或者加上动图都是可以的,但是整体的框架基本就是这样,所以下面来看看代码是怎么实现的

代码

.
wxml

<view class="view_contain">
  <!-- 第一部分 -->
  <view class="view_1">
    <view class="view_image_text">
      <image class="image_radius" src="../images/timg.png" />
      <text>张三</text>
    </view>
  </view>
  <!-- 第二部分 -->
  <view class="view_2">
    <view class="view_tupianwenzi">
      <image class="image_tupian" src="../images/test1.png"></image>
      <text class="text_saoyisao">待付款</text>
    </view>
    <view class="view_tupianwenzi">
      <image class="image_tupian" src="../images/test2.png"></image>
      <text class="text_saoyisao">待发货</text>
    </view>
    <view class="view_tupianwenzi">
      <image class="image_tupian" src="../images/test3.png"></image>
      <text class="text_saoyisao">待收货</text>
    </view>
    <view class="view_tupianwenzi">
      <image class="image_tupian" src="../images/test4.png"></image>
      <text class="text_saoyisao">待评价</text>
    </view>

  </view>
  <!-- 第三部分 -->
  <view class="view_3">
    <view class="list-item">
      <image class="item-image" src="../images/test5.png"></image>
      <text class="item-text">我的收藏</text>
      <image class="image-jiantou" src="../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../images/test6.png"></image>
      <text class="item-text">我的评价</text>
      <image class="image-jiantou" src="../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../images/test8.png"></image>
      <text class="item-text">版本更新</text>
      <image class="image-jiantou" src="../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../images/test9.png"></image>
      <text class="item-text">售后记录</text>
      <image class="image-jiantou" src="../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../images/test12.png"></image>
      <text class="item-text">分享邀请</text>
      <image class="image-jiantou" src="../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
  </view>
</view>

.
.
wxss

/* 使用page就是为了保证  满屏 */

page {
  width: 100%;
  height: 100%;
}

.view_contain {
  width: 100%;
  height: 100%;
  background: #f0eeed
}

/* 第一部分 */

.view_1 {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 25%;
  background: #a0deee;
}

.view_image_text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.image_radius {
  height: 50px;
  width: 50px;
  border-radius: 30px;
}

/* 第二部分 */

.view_2 {
  width: 100%;
  height: 15%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: white;
}

.view_tupianwenzi {
  display: flex;
  flex-direction: column;
  width: 120rpx;
  align-items: center;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.image_tupian {
  display: flex;
  width: 100rpx;
  height: 100rpx;
}

/* 第三部分 */

.view_3 {
  width: 100%;
  height: 50%;
  /* background: #f0eeed; */
}

.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80rpx;
  margin-top: 20rpx;
  position: relative; /*父元素位置要设置为相对*/
  background: white;
}

.item-image {
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
}

.item-text {
  color: gray;
  font-size: 35rpx;
  margin-left: 20rpx;
}

.image-jiantou {
  width: 20rpx;
  height: 35rpx;
  position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
  right: 0; /* 靠右调节 */
  margin-right: 35rpx;
}

/* 黑线 使得产生阴影效果 */

.line {
  width: 100%;
  height: 3rpx;
  background: lightgray;
  margin-left: 90rpx;
}


最后附上下载地址:
https://download.csdn.net/download/wy313622821/12366619

  • 14
    点赞
  • 0
    评论
  • 98
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解客服消息,是针对小程序。后台程序用接近底层技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目课程。既可以系统学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发基础知识。 购买课程同学,可赠送就九宝老师编写微信小程序开发宝典》。 购课请咨询qq2326321088
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值