微信小程序个人中心、我的界面（示例一）

微信小程序使用button按钮实现个人中心、我的界面（示例一）

微信小程序个人中心、我的界面，使用button按钮实现界面布局，更好的将分享好友、获取头像等功能展现出来，更多示例界面，请前往我的主页哦。

1、js代码：

const app = getApp();
Page({/*** 页面的初始数据*/data: {login: {show: false,avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',}},// 登录监听chooseAvatar(e) {this.setData({login: {show: true,avatar: e.detail.avatarUrl,}})},// 基本信息basicClick() {console.log('基本信息监听');},// 匿名反馈feedbackClick() {console.log('匿名反馈监听');},// 关于我们aboutClick() {console.log('关于我们监听');},// 退出监听exitClick() {let that = this;wx.showModal({title: '提示',content: '确定退出登录吗？',success(res) {if (res.confirm) {that.setData({login: {show: false,avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',}})}}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

2、wxml代码

<view class="top-bg"></view>
<view class="box"><!-- 头像 --><view class="head-box"><button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar"><image class="head-img" src="{{login.avatar}}" mode="widthFix"></image></button><view class="tip">{{login.show?'欢迎使用':'当前未登录，请登录！'}}</view></view><!-- 第一部分列表 --><view><button class="row" style="width: 100%;" bindtap="basicClick"><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">基本信息</text></view><view class="right">》</view></button><button class="row" style="width: 100%;" bindtap="feedbackClick"><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">匿名反馈</text></view><view class="right">》</view></button><button class="row" style="width: 100%;border-bottom: none;" bindtap="aboutClick"><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">关于我们</text></view><view class="right">》</view></button></view>
</view>
<!-- 第二部分列表 -->
<view class="end"><button open-type="share" class="row" style="width: 100%;"><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">分享好友</text></view><view class="right">》</view></button><button open-type="contact" class="row" style="width: 100%;border-bottom: none;"><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">在线客服</text></view><view class="right">》</view></button>
</view>
<!-- 第三部分列表 -->
<view class="end"><button wx:if="{{login.line}}" bindtap="exitClick" class="row" style="width: 100%;border-bottom: none;"><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">退出登录</text></view></button><button class="row" open-type="chooseAvatar" bindchooseavatar="chooseAvatar" style="width: 100%;border-bottom: none;" wx:else><view class="left"><icon class="icon-small" type="success" size="16"></icon><text class="text">立即登录</text></view></button>
</view>
<view class="footer"><text>©微信小程序个人中心demo</text>
</view>

3、wxss代码

page {background-color: #f1f1f1;
}/* 设置背景颜色 */
.top-bg {height: 260rpx;background-color: #fa3534;
}/* 圆角盒子 */
.box {background-color: white;margin-top: -120rpx;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;padding: 0 20rpx;
}/* 头像部分 */
.head-box {display: flex;flex-direction: column;justify-content: center;align-items: center;border-bottom: 1rpx solid #fbdbdc;padding-bottom: 20rpx;
}.avatar {margin-top: -80rpx;font-weight: inherit;display: flex;justify-content: center;background-color: rgba(0, 0, 0, 0);
}.avatar::after {border: none;
}.head-img {width: 140rpx;height: 140rpx;overflow: hidden;border-radius: 50%;background-color: #fbdbdc;
}.tip {font-size: 26rpx;color: gray;margin: 15rpx 0;
}/* 列表部分 */
.row {display: flex;align-items: center;padding: 36rpx 10rpx;font-size: 30rpx;font-weight: inherit;background-color: rgba(0, 0, 0, 0);border-bottom: 1rpx solid #fbdbdc;
}.row::after {border: none;
}.text {margin-left: 15rpx;color: #636262;
}.left {width: 90%;text-align: left;display: flex;align-items: center;
}.right {width: 10%;text-align: right;color: rgb(148, 147, 147);
}.end {background-color: white;margin-top: 20rpx;padding: 0 20rpx;
}.footer {display: flex;justify-content: center;align-items: center;padding: 20rpx 0;font-size: 22rpx;margin: 30rpx 0;color: gray;
}

4、json代码

{"usingComponents": {},"navigationBarBackgroundColor": "#fa3534","navigationBarTitleText": "个人中心"
}

微信小程序个人中心、我的界面（示例一）相关推荐

微信小程序个人中心-我的界面
个人中心-我的界面简介我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录.所以本文主要针对这个页面做了一个自己熟练的界 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
微信小程序好看的输入信息界面——发送验证码倒计时
微信小程序好看的输入信息界面简介输入个人信息界面,录入个人信息等都可以使用到这个界面: 1.输入信息的布局界面 2.选择大陆还是港澳台的手机号码 3.输入手机号码, 4.获取验证码的60S倒计时, ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序】仿京东商品分类界面
微信小程序]仿京东商品分类界面要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化 ...
微信个人中心 html,微信小程序个人中心的列表控件实现代码
个人中心的列表控件首先来看效果图 wxml 我的收藏 wxss .list-item { display: flex; flex-direction: row; align-items: cente ...
Laravel 微信小程序后端实现用户登录的示例代码
Laravel 微信小程序后端实现用户登录的示例代码这篇文章主要介绍了Laravel 微信小程序后端实现用户登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 ...
【微信小程序企业级开发教程】界面刷新获取新更新数据
在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...

微信小程序个人中心、我的界面（示例一）

微信小程序使用button按钮实现个人中心、我的界面（示例一）

微信小程序个人中心、我的界面（示例一）相关推荐

最新文章

热门文章