本文给大家带来的是微信小程序蓝色个人账号信息页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/account/accountinfo.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
<text class="{{popType}}">{{popMsg}}</text>
</view>
<view class="list ">
<navigator url="" open-type="navigate" class="item item-avatar item-icon-right ">
<image src="{{userdata.userfigure||'../../images/head.jpg'}}" alt=""></image>
<view class="p padding-top">头像</view>
<text class="icon-accessory iconfont icon-right "></text>
</navigator>
<navigator url="" open-type="navigate" class="item item-icon-right">
<view class="h2">昵称 <text class="item-note">{{userdata.nickname}}</text></view>
<text class="icon-accessory iconfont icon-right "></text>
</navigator>
<navigator url="" open-type="navigate" class="item item-icon-right">
<view class="h2">手机号码 <text class="item-note">{{userdata.mobile}}</text></view>
<text class="icon-accessory iconfont icon-right "></text>
</navigator>
<navigator url="" open-type="navigate" class="item item-icon-right">
<view class="h2">会员类型 <view class="item-note ">{{usertype!=0?servicesstr:''}} <text class="positive">{{!isOrganizingData?'去完善信息':''}}</text></view>
</view>
<text class="icon-accessory iconfont icon-right "></text>
</navigator>
<navigator url="" open-type="navigate" class="item item-icon-right {{usertype==1?'item-borderless':''}}">
<view class="h2">性别 <text class="item-note">{{userdata.sex==0?'保密':(userdata.sex==1?'男':'女')}}</text></view>
<text class="icon-accessory iconfont icon-right "></text>
</navigator>
<view class="item ">
<view class="h2">所在地区 <text class="item-note">{{userdata.addr}}</text></view>
</view>
</view>
|
二、js页面代码如下：
// pages/account/accountinfo.js
var app = getApp();
var util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getAccountData();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 获取我的数据
*/
getAccountData: function () {
var that = this;
//根据会员ID获取会员账号基本信息
util.getUserInfo(function (data) {
that.setData({
userdata: data.data
})
})
}
})
|
.jpg)
.jpg)
