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

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

一、效果预览

二、源代码

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.ts
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad() {var that = this;},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},// 退出登录logout: function () {wx.showModal({content: '确定退出登录吗？',cancelColor: '#666666',//666666confirmColor: '#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() {}
})

微信小程序个人中心页面案例相关推荐

微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序钱包支付页面案例
小程序钱包页面效果图 WXML代码  <view class="container"><view class=&q ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序个人中心、我的界面（示例一）
微信小程序使用button按钮实现个人中心.我的界面(示例一) 微信小程序个人中心.我的界面,使用button按钮实现界面布局,更好的将分享好友.获取头像等功能展现出来,更多示例界面,请前往我的主页哦 ...
微信小程序|上下滚动页面实现
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 案例描述微信小程 ...
【微信小程序】各种页面特效链接！
微信小程序:各种页面特效链接! 1.文字跑马灯效果: http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2.触摸水波涟漪效果: h ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...

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

微信小程序个人中心页面案例相关推荐

最新文章

热门文章

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

微信小程序个人中心页面 案例相关推荐

最新文章

热门文章

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

微信小程序个人中心页面案例相关推荐