微信小程序使用button按鈕實現(xiàn)個人中心、我的界面(示例一)
微信小程序個人中心、我的界面,使用button按鈕實現(xiàn)界面布局,更好的將分享好友、獲取頭像等功能展現(xiàn)出來,更多示例界面,請前往我的主頁哦。
1、js代碼:
const app = getApp();
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
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',
}
},
// 登錄監(jiān)聽
chooseAvatar(e) {
this.setData({
login: {
show: true,
avatar: e.detail.avatarUrl,
}
})
},
// 基本信息
basicClick() {
console.log('基本信息監(jiān)聽');
},
// 匿名反饋
feedbackClick() {
console.log('匿名反饋監(jiān)聽');
},
// 關(guān)于我們
aboutClick() {
console.log('關(guān)于我們監(jiān)聽');
},
// 退出監(jiān)聽
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',
}
})
}
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload() {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
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?'歡迎使用':'當(dāng)前未登錄,請登錄!'}}</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">關(guān)于我們</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代碼文章來源:http://www.zghlxwxcb.cn/news/detail-509699.html
page {
background-color: #f1f1f1;
}
/* 設(shè)置背景顏色 */
.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代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-509699.html
{
"usingComponents": {},
"navigationBarBackgroundColor": "#fa3534",
"navigationBarTitleText": "個人中心"
}
到了這里,關(guān)于微信小程序個人中心、我的界面(示例一)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!