当前位置:首页 » 《随便一记》 » 正文

微信小程序个人中心页面 案例

13 人参与  2024年04月03日 13:50  分类 : 《随便一记》  评论

点击全文阅读


微信小程序 开发,经常会遇到个人中心页面 的需求,为了方便大家使用,决定将个人总想页面进行开源,以供大家参考交流。

一、效果预览

     

 二、源代码

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">联系电话:17365963369</text>          <text class="family_info_ct">关联账号:王老师  </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>我的预约</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>关于我们</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;  /* 旋转45度 */  transform: rotate(45deg);  /* 调整位置 */  position: absolute;  right: 30rpx;  top: 38rpx;} .userItemListView text{  font-size: 30rpx;}.last_view{   background:#f0f0f0;   width: 100%;   height:1200rpx;}

abouthe.ts文件

// pages/personal/myinfo.tsPage({  /**   * 页面的初始数据   */  data: {  },  /**   * 生命周期函数--监听页面加载   */  onLoad() {    var that = this;  },  /**   * 生命周期函数--监听页面初次渲染完成   */  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) { },//接口调用失败的回调函数      complete: function (res) { },//接口调用结束的回调函数(调用成功、失败都会执行    })  },  /**   * 生命周期函数--监听页面显示   */  onShow() {    wx.hideHomeButton();    wx.hideShareMenu();  },  /**   * 生命周期函数--监听页面隐藏   */  onHide() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage() {  }})


点击全文阅读


本文链接:http://zhangshiyu.com/post/90033.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 热文推荐凤显,沐倾城附加(废后归来:嫡女狠角色)(凤显,沐倾城)最新章节列表
  • 24张化疗单无错版_任行洲舒卿小姐必读文_小说后续在线阅读_无删减免费完结_
  • 小说大结局小说沈黎小说已更新+特别篇(恶毒女配作上天冷面大佬跪地哄)纯净版
  • 装穷老婆为男大买YU7后悔疯了后续_沈如烟傅斯书傅先生精校文本_小说后续在线阅读_无删减免费完结_
  • 最新章节_笔趣阁(江东)江东小说(抗战之重整河山)在线畅读阅读
  • 恶毒女配作上天,冷面大佬跪地哄小说(沈黎)小说全集阅读连载中(恶毒女配作上天,冷面大佬跪地哄)_笔趣阁
  • 恶毒女配作上天冷面大佬跪地哄小说完结篇(沈黎)(恶毒女配作上天冷面大佬跪地哄)全书无套路阅读无广告小说大结局
  • 重生后我把妈妈换了,她却后悔了后续加长_妹妹林清母亲节精选作品_小说后续在线阅读_无删减免费完结_
  • 全网首发苏娆时砚清:+后续+番外(我曾经天真地以为,他也有片刻动心的牀)全本完整阅读无弹窗
  • 帮堂哥联系外科专家后,我上了手术台大反击_大伯母小凡明白后续更新+番外_小说后续在线阅读_无删减免费完结_
  • 兽世:穿成恶毒雌性后被反派大佬们强宠了小说(思雅)(兽世:穿成恶毒雌性后被反派大佬们强宠了)完整章节列表_笔趣阁
  • 迟暮不归推文_慕承川许依柔迟清夏爽文_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1