⼩程序学习笔记（⼋）----⽤户个⼈中⼼界⾯
到了实现三个菜单⾥⾯最后⼀个个⼈中⼼页⾯的时候了，这个没有⾃⼰写，因为写到现在虽然对⼩程序前端有了⼀些了解，但是还谈不上很熟悉，所以借鉴了⼀个⽹友的⽂章，在他的基础上⾃⼰改了⼀下，因为之前的我直接⽤是显⽰不全的，不过改了之后不如之前好看，后⾯会附上这个⽹友的⽂章地址。
最终我实现的效果是这样的：
其实⽤到的东西并不多，主要还是⼀些前端的样式，下⾯是实现步骤和代码。
第⼀，准备图⽚素材
我依旧还是从阿⾥⽮量图上的图⽚，下⾯附上⽹站：
到⾃⼰需要的⽮量图下载png格式就可以了
第⼆，⽬录结构
第三，实现代码
.wxml⽂件
<!--pages/user/user.wxml-->
<view class="mine-wrapper">
<view class="avatar-wrapper">
<view>
<view class="avatar">
<image src="{{userinfo.avatarUrl ? userinfo.avatarUrl:'/images/user/user1.png'}}"></image>      </view>
<view class="text">
<text wx:if="{{userinfo.nickName}}">{{userinfo.nickName}}</text>
<text wx:else bindtap="toLogin">注册 / 登录</text>
</view>
<view class="text">
<text wx:if="{{userSign==2}}">{{"您还没有填写真实信息，请填写"}}</text>
<text wx:elif="{{userSign==1}}">{{"会员⽤户"}}</text>
</view>
</view>
</view>
<view class="list-wrapper">
<view class="alllists">
<block wx:for="{{menuitems}}" wx:key="menu_for">
<navigator url="{{item.url}}" class="lists">
<view class='content'>
<view class="listimg">
<image src="{{item.icon}}"></image>
</view>
<view class="listtext">{{}}</view>
<view class="listicon">{{item.tips}}</view>
<view class="arrows">
<image src="{{item.arrows}}"></image>
</view>
</view>
</navigator>
<!-- 分割线 -->
<view class="divLine"></view>
</block>
</view>
</view>
</view>
.js⽂件
// pages/user/user.js
var _app = getApp()
Page({
/**
* 页⾯的初始数据
*/
data: {
menuitems: [
{ text: '个⼈资料', url: '#', icon: '/images/user/user1.png', tips: '', arrows: '/images/user/arrows.png' },      { text: '邀请好友', url: '#', icon: '/images/user/user2.png', tips: '', arrows: '/images/user/arrows.png' },      { text: '积分兑换', url: '#', icon: '/images/user/user3.png', tips: '', arrows: '/images/user/arrows.png' },      { text: '帮助说明', url: '#', icon: '/images/user/user4.png', tips: '', arrows: '/images/user/arrows.png' }    ]
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/
**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
}
})
.wxss
写文章的小程序/* pages/user/user.wxss */
.avatar-wrapper {
background: #1b82d1;
padding: 25px 0;
}
.
avatar-wrapper .avatar {
margin: 0 auto;
text-align: center;
}
.avatar-wrapper .avatar image {
width: 100px;
height: 100px;
}
.avatar-wrapper .text {
text-align: center;
color: #fff;
}
.listimg image {
margin-right: 5px;
vertical-align: middle;
width: 20px;
height: 20px;
}
.content{
display: flex;
margin-top: 10px;
margin-bottom: 10px;
}
/*分割线样式*/
.divLine{
background: #E0E3DA;
width: 100%;
height: 5rpx;
}
.arrows image {
vertical-align: middle;
width: 15px;
height: 15px;
margin-left: 500rpx;
}
/* user.wxss */
最后附上借鉴的⽹友的⽂章，感谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。