微信小程序个人中心展示样式

演示

wxml

<view class="view_contain">
 
 <!-- 第一部分 -->
 <view wx:if="{{userinfo}}">
   <view class="view_1">
     <view class="view_image_text">
       <view>
         <image class="image_radius" src="{{userinfo.head_portrait}}" />
       </view>
       <view class="uname">
         <text>{{userinfo.username}}</text>
         <text>{{userinfo.tel}}</text>
       </view>
       </view>
     </view>
   </view>

 <view wx:else class="view_1">
     <view class="view_image_text">
       <view>
         <image class="image_radius" src="/image/tutu.png" />
       </view>
       <view class="uname">
         <navigator url="/pages/login/login">
         <text>未登录</text>
       </navigator>
         <!-- <text>{{userinfo.tel}}</text> -->
       </view>
     </view>
   </view>

 <!-- 第三部分 -->
 <view class="big3">
   <view wx:for="{{info}}" wx:key="item" class="view_3 {{item.class}}">
     <navigator url="{{item.url}}">
       <view class="list-item">
         <image class="item-image" src="/image/tutu.png"></image>
         <text class="item-text">{{item.title}}</text>
         <image class="image-jiantou"
           src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2979651982,619079820&fm=26&gp=0.jpg"></image>
       </view>
     </navigator>
   </view>
 </view>
</view>

js

var plugin = requirePlugin("ykfchat")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:[
      {title:"我的钱包",url:"/pages/patientment/patientment"},
      {title:"邀请有礼"},{title:"认证中心"},
      {title:"联系客服",url:"plugin://ykfchat/chat-page?wechatapp_id=251563&channel_id=27679&scene=p98503hqaepl"},
      {title:"帮助与反馈"},
      {title:"直播",url:"/pages/live/live"},
      {class:"box",title:"设置"}
    ],
    userinfo:''
  },

   // 传参
   jump() {
    plugin.callback.on("getSessionFrom", this.session, this); // 事件名称， 事件函数，this作用域
    wx.navigateTo({
      url: 'plugin://ykfchat/chat-page?wechatapp_id=251563&channel_id=27679&scene=p98503hqaepl'
    })
  },
  session(callback) {
    // 組裝数据
    let data = {
      sessionFrom: {
        channel_logo: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1504788190,2342400802&fm=26&gp=0.jpg',//需为网络资源
        channel_nickname: '宝宝'
      }
    }
    callback(data)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let _this = this
    // 根据缓存id查询该用户
   wx.getStorage({
     key: 'user_tel',
     success:function(res){
       // console.log(res.data);
       wx.request({
         url: 'http://www.teacherapi.com/api/getLogin',
         data:{
           phone: res.data
         },
         success: (result) => {
           console.log(result.data.data)
           _this.setData({
             userinfo:result.data.data
           })
         },
       })
     }
   })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

css

/* pages/personal_center/personal_center.wxss */
/* 使用page就是为了保证  满屏 */

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

.view_contain {
  width: 100%;
  height: 100%;
  background: white
}

/* 第一部分 */

.view_1 {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 350rpx;
  background: rgb(52,120,247);
}

.view_image_text {
  width: 100%;
  display: flex;
  justify-content: left;
  /* flex-direction: column; */
    /* align-items: center; */
  color: white;
  margin-left: 40rpx;
  margin-top: 80rpx;
}

.uname{
  display: flex;
  flex-direction: column;
  margin-left: 45rpx;

  /* align-items: center; */
  margin-top: 6rpx;
}

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



/* 第三部分 */
.big3{
  width: 90%;
  margin: 0rpx auto;
  margin-top: -120rpx;
  border: 1rpx solid lightgray;
  border-radius: 20rpx;
  background: white;
}
.view_3 {
  width: 100%;
  height: 100rpx;
  /* background: #f0eeed; */
  border-bottom: 1rpx solid lightgray;
}

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

.item-image {
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
  border-radius: 12px;
  border:1px solid white;
  
}

.item-text {
  color: gray;
  /* color: rgb(51,51,51); */
  font-size: 30rpx;
  margin-left: 20rpx;
}

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

/*去掉最后面的下画线*/
.box{
  border: none;
}

json

{
  "navigationBarTitleText": "个人中心",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#3478F7",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true
}

撒花！！！！

↓

好多人私信评论说代码有问题，我简单的还原了下。可以看这篇