本文给大家带来的是微信小程序蓝色风格个人账户设置页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/account/setting.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
<text class="{{popType}}">{{popMsg}}</text>
</view>
<view>
<view class="padding-top"></view>
<view class="list ">
<navigator url="" open-type="navigate" class="item item-icon-right">
<view class="h2">账号安全
<text class="item-note">安全等级 : {{securitylevel}}</text>
</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<view class="padding-top"></view>
<navigator url="../news/news" open-type="switchTab" class="item item-icon-right ">
<view class="h2">新消息通知</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<navigator url="" open-type="navigate" class="item item-icon-right">
<view class="h2">帮助与反馈</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<navigator url="" open-type="navigate" class="item ">
<view class="h2">当前版本号
<text class="item-note">{{version}}</text>
</view>
</navigator>
<view class="padding">
<navigator url="login" open-type="reLaunch" class="button button-light button-full " style="color:red;">
退出登录
</navigator>
</view>
</view>
</view>
|
二、js页面代码如下：
// pages/account/setting.js
var app = getApp();
var util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
