本文给大家带来的是微信小程序绿色背景优惠券个人中心样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<view class="avatar flex">
<image src="{{userInfo.avatarUrl}}">
</image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="cells">
<block wx:for="{{items}}" wx:key="{{item}}">
<view class="cell">
<view class="cell-bd">
<text class="desc">{{item.desc}}</text>
</view>
<view class="cell-ft"></view>
</view>
</block>
</view>
</view>
|
二、wxss样式文件代码如下:
.container{
background-color: #f8f8f8;
width: 100%;
}
.avatar{
width: 100%;
height: 200px;
background-color: #00beaf;
}
.flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.avatar image{
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 10px;
}
.login{
font-size: 18px;
color: #fff;
border: 1px solid #fff;
padding: 6px 18px;
border-radius: 3px;
}
.cells{
width: 100%;
margin-top: 16px;
background-color: #fff;
font-size: 16px;
border-bottom: 1px solid #dadada;
}
.cell{
display: -webkit-flex;
display: -ms-flex;
display: flex;
padding: 10px 10px;
border-top: 1px solid #dadada;
box-sizing: border-box;
}
.cell .cell-bd{
flex: 1;
}
.cell-ft:after{
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-width: 2px 2px 0 0;
border-color: #c8c8cd;
border-style: solid;
transform: rotate(45deg);
}
|
三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
userInfo:{},
items:''
},
bindViewTap: function(e){
wx.navigateTo({
url: '../login/index'
})
},
onLoad:function(){
app.getUserInfo((data) => {
this.setData({
userInfo:data
})
});
wx.request({
url:'http://www.easy-mock.com/mock/5906811e7a878d73716e32c9/viplist/mylist',
method:'GET',
data:{},
header:{
'Accept':'application/json'
},
success:(res) => {
console.log(res);
this.setData({
items:res.data.item
})
}
})
}
})
|