今天带来教程制作与设计会员个人中心系统设置页面。制作效果如下：
一、wxml页面代码如下：
<!--条目列表 -->
<view class="setup-list">
<navigator url='/pages/modifyPasd/modifyPasd'>
<text>修改密码</text>
<image src='/images/b.png'></image>
</navigator>
<navigator url="/pages/static/feedback/feedback">
<text>意见反馈</text>
<image src='/images/b.png'></image>
</navigator>
<navigator url='/pages/aboutList/aboutList'>
<text>关于</text>
<image src='/images/b.png'></image>
</navigator>
<navigator url='/pages/static/Help/Help'>
<text>帮助</text>
<image src='/images/b.png'></image>
</navigator>
<view class='quit' bindtap='quitFn'><text>退出登陆</text></view>
</view>
|
二、wxss样式页面代码：
/* pages/setUp/setUp.wxss */
.setup-list {
padding: 0 30rpx;
}
.setup-list navigator {
display: flex;
justify-content:space-between;
padding: 30rpx 0;
border-bottom: 1rpx solid #e8e8e8;
}
.setup-list navigator text{
font-size: 30rpx;
}
.setup-list navigator image{
height: 35rpx;
width: 35rpx;
}
.quit {
padding: 30rpx ;
}
.quit text{
width: 100%;
padding: 18rpx 0;
background-color: rgba(217, 42, 42, 1);
display: flex;
font-size: 30rpx;
color: #fff;
align-items: center;
justify-content: center;
border-radius: 10rpx;
}
|
三、 js测试数据页面代码：
// 函数库
var Utils = require("../../utils/util.js");
// pages/setUp/setUp.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
getStorag:function(){ // 获取本地存储信息
var data = wx.getStorageSync("login");
return {
sdk: data.sdk,
uid: data.uid
}
},
quitFn:function(){ // 退出登陆
Utils.removeStorage("Reset");
var res = this.getStorag();
Utils.requestFn({
url: '/index.php/loginOut?server=1',
method:"POST",
data: {
sdk: res.sdk,
uid: res.uid
},
success: function (res) {
if (res.data.status){
wx.reLaunch({
url: '/pages/login/login'
})
Utils.removeStorage("login");
}else{
Utils.reLaunch(res.data.message,"/pages/login/login");
Utils.removeStorage("login");
}
return false;
}
})
}
})
|
.jpg)
.jpg)
