本文给大家带来的是微信小程序宏华净水蓝色个人余额管理页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="bg-gray">
<view class="topBg">
<div class="flex align infoBox">
<div class="item">
<div class="title">
<div class="borderB">当前余额</div>
</div>
<div class="day">297.00</div><!--day-->
</div>
</div><!--infoBox-->
<image style="" mode="scaleToFill" src="../../image/pho_home_top@3x.png"></image>
</view><!--topBg-->
<div class="space20"></div>
<view class="defaultList">
<view class="list flex align rightNav" bindtap='gorecharge'>
<view class="icon item"><image style="" mode="widthFix" src="../../image/yggl_icon_ygcz_default@3x.png"></image></view>
<view class="text item">余额充值</view>
</view>
<view class="list flex align rightNav" bindtap='gobalancelist'>
<view class="icon item"><image style="" mode="widthFix" src="../../image/yggl_icon_czjl_default@3x.png"></image></view>
<view class="text item">充值记录</view>
</view>
<view class="list flex align rightNav" bindtap='gobuyrecord'>
<view class="icon item"><image style="" mode="widthFix" src="../../image/yggl_icon_gmjl_default@3x.png"></image></view>
<view class="text item">购买记录</view>
</view>
</view><!--defaultList-->
<div class="space20"></div>
<view class="defaultList">
<view class="list flex align rightNav">
<view class="icon item"><image style="" mode="widthFix" src="../../image/yggl_icon_cjwt_default@3x.png"></image></view>
<view class="text item">常见问题</view>
</view>
</view><!--defaultList-->
</view><!--bg-gray-->
|
二、wxss样式文件代码如下：
/**index.wxss**/
.topBg image{
display: block;
width: 100%;
height:160px;
}
.topBg{
position: relative;
}
.topBg .infoBox{
position: absolute;
width: 100%;
height: 100%;
}
.topBg .infoBox .title{
color: white;
font-size: 12px;
opacity: 0.7;
}
.topBg .infoBox>.item{
width: 100%;
padding: 0 20px;
text-align: center;
}
.topBg .infoBox .title .borderB{
width: 100px;
margin: 0 auto;
text-align: left;
position: relative;
}
.topBg .infoBox .title .borderB:after{
content: '';
position: absolute;
left: 0;
bottom:-5px;
width:30px;
height: 1px;
background: white;
}
.topBg .infoBox .day{
color: white;
font-size: 35px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
|
三、js页面代码如下：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
gobalancelist:function(){
wx.navigateTo({
url: "../balance_list/balance_list"
})
},
gorecharge:function(){
wx.navigateTo({
url: '../recharge/recharge',
})
},
gobuyrecord:function(){
wx.navigateTo({
url: '../buy_record/buy_record',
})
}
})
|
.jpg)
.jpg)
