微信小程序 開發(fā)，經(jīng)常會遇到個人中心頁面 的需求，為了方便大家使用，決定將個人總想頁面進(jìn)行開源，以供大家參考交流。

一、效果預(yù)覽

? ? ?

?二、源代碼

abouthe.json文件

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F2F2F2",
  "backgroundTextStyle": "light",
  "disableScroll":true,
  "navigationStyle": "custom"
}

abouthe.wxml文件

<!-- 用戶列表選項 -->
<scroll-view class='scbg' scroll-y='true'>
  <view class="parent_catainer">
    <!-- 頭部 -->
    <!-- style="background-image: url('/images/persons/mind_head_bg.jpg');" -->
    <view class="container_head">
      <image class="head_img" src="/images/mind_head_bg.jpg"></image>
      <view class="head_pers_info" bindtap="head_pers_info">
        <view class="head_pic">
          <image class="head_pic_content" mode="aspectFit" src="/images/lemon.png"></image>
        </view>
        <view class="inf_content">
          <text class="user_info">李大錘</text>
          <text class="family_info_ct_phone">聯(lián)系電話：17365963369</text>
          <text class="family_info_ct">關(guān)聯(lián)賬號：王老師  </text>
        </view>
      </view>
    </view>

    <view class="userItemListView">
      <view class="my_priview_md" bindtap="myappointpage">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的預(yù)約</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="openmyorder">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的訂單</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="myaid">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的救助</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="myfriend">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的親友</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="mycollection">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>我的收藏</text>
        <view class="arrow"></view>
      </view>
    </view>

    <view class="userItemListView">
      <view class="my_priview_md" bindtap="bind">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>個人資料</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="updatepassword">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>修改密碼</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="aboutus" hidden="true">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>關(guān)于我們</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="logout">
        <image class="my_priview" src="/images/mine_fiend.png"></image>
        <text>退出登錄</text>
        <view class="arrow"></view>
      </view>
    </view>

    <view class="last_view"></view>
  </view>
</scroll-view>

abouthe.wxss文件

/* 用戶列表選項樣式 */
page {
  width: 100%;
  height: 100%;
  background:#f0f0f0;
}
.parent_catainer{
  background:#f0f0f0;
}

/* 頭部背景圖片 */
.container_head{
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
   height: 200rpx;
   width: 100%;
   margin-bottom: 50rpx;
   justify-content: left;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
}

.head_pic{
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #08cbb0;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
  margin-left: 5%;
}

.inf_content{
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
   color: #ffffff;
   padding-bottom: 5rpx;
}

.user_info{
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.family_info_ct_phone{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.family_info_ct{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
  background: #fff;
  padding: 0 0rpx;
  margin: 24rpx 0;
}
 
.userItemListView > view{
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}
 
/* 移除最后一個元素的下邊框 */
.userItemListView > view:last-child{
  border: none;
}

.my_priview_md{
  display: flex;
  align-items: center;
}

.my_priview{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
 
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋轉(zhuǎn)45度 */
  transform: rotate(45deg);
  /* 調(diào)整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}
 
.userItemListView text{
  font-size: 30rpx;
}

.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}

abouthe.ts文件文章來源地址http://www.zghlxwxcb.cn/news/detail-503946.html

// pages/personal/myinfo.ts
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad() {

    var that = this;
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {

  },

  // 退出登錄
  logout: function () {

    wx.showModal({
      content: '確定退出登錄嗎？',
      cancelColor: '#666666',//666666
      confirmColor: '#666666',
      success(res) {
        if (res.confirm) {
          wx.reLaunch({
            url: '/pages/login/login'
          })
          console.log('用戶點擊確定')
        } else if (res.cancel) {
          console.log('用戶點擊取消')
        }
      },
      fail: function (res) { },//接口調(diào)用失敗的回調(diào)函數(shù)
      complete: function (res) { },//接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行
    })

  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {
    wx.hideHomeButton();
    wx.hideShareMenu();
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {

  }
})

到了這里，關(guān)于微信小程序個人中心頁面 案例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！