本文给大家带来的是微信小程序快递行业运单个人中心页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="member">
<view class="wraper">
<view class="head">
<image src="../../images/member/head.png" class="headimg" mode="aspectFit"></image>
<view class="name">布兰奇MA</view>
<text class="more">></text>
</view>
</view>
</view>
<view class="tool">
<view class="common">
<view class="img">
<image src="../../images/member/1.png" class="tool-img" mode="aspectFit" ></image>
</view>
<view class="desc">
我的运单
</view>
</view>
<view class="common">
<view class="img">
<image src="../../images/member/2.png" class="tool-img" mode="aspectFit" ></image>
</view>
<view class="desc">
我的运单
</view>
</view>
<view class="common">
<view class="img">
<image src="../../images/member/3.png" class="tool-img" mode="aspectFit" ></image>
</view>
<view class="desc">
我的运单
</view>
</view>
<view class="common">
<view class="img">
<image src="../../images/member/4.png" class="tool-img" mode="aspectFit" ></image>
</view>
<view class="desc">
我的运单
</view>
</view>
</view>
<view class="part-bottom">
<view class="part-wrap">
<view class="icon">
<image class="icon-img" src="../../images/member/11.png" mode="aspectFit"></image>
</view>
<view class="word">
资料管理
</view>
<text class="right-arrow">></text>
</view>
<view class="sep"></view>
<view class="part-wrap">
<view class="icon">
<image class="icon-img" src="../../images/member/22.png" mode="aspectFit"></image>
</view>
<view class="word">
我的优惠券
</view>
<text class="right-arrow">></text>
</view>
<view class="sep"></view>
<view class="part-wrap">
<view class="icon">
<image class="icon-img" src="../../images/member/33.png" mode="aspectFit"></image>
</view>
<view class="word">
收货地址
</view>
<text class="right-arrow">></text>
</view>
<view class="sep"></view>
<view class="part-wrap">
<view class="icon">
<image class="icon-img" src="../../images/member/44.png" mode="aspectFit"></image>
</view>
<view class="word">
帮助中心
</view>
<text class="right-arrow">></text>
</view> <view class="sep"></view>
<view class="part-wrap">
<view class="icon">
<image class="icon-img" src="../../images/member/55.png" mode="aspectFit"></image>
</view>
<view class="word">
关于代购
</view>
<text class="right-arrow">></text>
</view>
</view>
|
二、wxss样式文件代码如下：
/* member.wxss */
.member{
padding:40px 20px;
background-color:#ea0f34;
}
.wraper{
/* border: 1px solid red; */
}
.head{
display:flex;
position:relative;
}
.headimg{
height:50px;
width:50px;
}
.name{
line-height:50px;
color:#ffffff;
margin-left:20px;
font-size:20px;
}
.more{
line-height:50px;
color:#ffffff;
position:absolute;
right:0;
font-size:18px;
}
/*tool */
.tool{
margin:10px 0;
padding:10px 20px;
display:flex;
background-color:#ffffff;
}
.common{
width:25%;
}
.img{
display:flex;
justify-content:center;
}
.tool-img{
width:40px;
height:40px;
}
.desc{
text-align: center;
}
/*part bottom */
.part-bottom{
margin-top:10px;
background-color:#ffffff;
}
.part-wrap{
display:flex;
padding:10px;
}
.icon{
height:20px;
width:20px;
margin-right:10px;
}
.icon-img{
height:20px;
width:20px;
}
.word{
line-height:20px;
color:rgba(0,0,0,0.8);
}
.right-arrow{
float:right;
position:absolute;
right:30px;
line-height:20px;
font-size:20px;
color:rgba(0,0,0,0.8);
}
.sep{
width: 100%;
height: 5px;
background-color: #f5f5f5;
}
|
三、js页面代码如下：
// member.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
