本文给大家带来的是微信小程序会员vip充值页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<view class="binner">
<image src="{{images}}"></image>
</view>
<block wx:for="{{items}}" wx:key="item">
<view class="vip-list">
<view class="flex-row" style="background: transparent url('{{item.image}}') no-repeat scroll 2% 28%;">
<view class="text">
<text class="title">{{item.title}}</text>
<text class="sub-title">{{item.subtitle}}</text>
</view>
<view class="chongzhi">{{item.chongzhi}}</view>
</view>
</view>
</block>
</view>
|
二、wxss样式文件代码如下:
.container{
background-color: #f8f8f8;
}
.binner{
width: 100%;
height: 160px;
margin-bottom: 10px;
}
.binner image{
width: 100%;
height: 160px;
}
.vip-list{
width: 100%;
height: 80px;
margin-bottom: 10px;
background-color: #fff;
}
.flex-row{
width: 100%;
height: 100%;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
background-size: 28px 28px !important
}
.text{
flex: 1;
box-sizing: border-box;
padding-left: 20px;
}
.text text{
display: block;
}
.text .title{
font-size: 16px;
margin-bottom: 8px;
}
.text .sub-title{
font-size: 14px;
color: #999;
}
.chongzhi{
border: 1px solid #00beaf;
background-color: #fff;
color: #00beaf;
padding: 6px 10px;
border-radius: 8px;
}
|
三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
images:'',
items:[]
},
onLoad:function(){
wx.request({
url:'http://www.easy-mock.com/mock/5906811e7a878d73716e32c9/viplist/itemlist',
method:'GET',
data:{},
header:{
'Accept':'application/json'
},
success:(res) => {
console.log(res);
this.setData({
images:res.data.image,
items:res.data.item
});
}
})
}
})
|