今天给大家带来开发会员中心错题历史题目收藏页面制作与设计教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--person.wxml-->
<view class="container">
<view class="person">
<view class="person-info">
<view class="head"><image src="{{userData.AvatarLarge}}" mode="widthFix"></image></view>
<view class="name">
<text class="nickname">{{'昵称: ' + userData.Nickname}}</text>
<text class="username">{{'用户名: ' + userData.Username}}</text>
</view>
</view>
<view class="other-info">
<navigator class="other-list" wx:for="{{infos}}" wx:key="url" url="{{item.url}}">{{item.content}}</navigator>
<view class="other-list" bindtap="logOff">退出登录</view>
</view>
</view><!-- person -->
</view>
|
二、wxss样式文件代码如下：
/**index.wxss**/
page {
width: 100%;
background: #eee;
}
.person{
width: 100%;
}
.person .person-info{
height: 100px;
padding-left: 20px;
background: #FFF;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.person .person-info view{
height: 100px;
float: left;
}
.person .person-info image{
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 70px;
max-height: 70px;
}
.person .person-info text{
padding-left: 20px;
display: block;
}
.person .person-info .nickname{
margin-top: 10px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
.person .person-info .username{
line-height: 14px;
padding-left: 20px;
font-size: 14px;
}
.person .other-info{
width: 100%;
margin-top: 20px;
}
.person .other-info .other-list{
width: 100%;
height: 45px;
line-height: 45px;
text-indent: 20px;
background: #FFF;
border-bottom: 1px solid #CCC;
color: black;
font-size: 14px;
}
.person .other-info .other-list:first-child{
border-top: 1px solid #CCC;
}
.person .other-info .other-list:last-child{
color: orangered
}
|
三、js页面代码如下：
//person.js
//获取应用实例
var app = getApp();
Page({
data: {
userData: {
Nickname: '微信小程序',
Username: 'WeApp',
AvatarLarge: '../../image/head.jpg'
},
infos:[
{
content: '错题历史',
url: "../errorlist/errorlist"
},
{
content: '题目收藏',
url: "../favorite/favorite"
},
]
},
logOff: function(e) {
wx.showModal({
title:'注意',
content:'确认退出登录？',
success:function(res) {
if (res.confirm) {
wx.request({
url: app.url.host + app.url.logOffUrl,
method: 'GET',
success: function(data){
//清除token
wx.removeStorageSync('Authorization');
wx.removeStorageSync('User');
wx.removeStorageSync('SubjectId');
var toastDelay = 1000;
wx.showToast({
title: '退出登录成功',
duration: toastDelay
});
setTimeout(function(){
wx.redirectTo({
url: '../login/login'
});
},toastDelay);
},
complete: null
});
}
}
});
}
})
|
.jpg)
.jpg)
