微信小程序蓝色风格个人钱包页面设计制作开发教程

本文给大家带来的是微信小程序蓝色风格个人钱包页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/wallet/wallet.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
    <text class="{{popType}}">{{popMsg}}</text>
</view>
<view>
    <view class="row row-center row-no-padding  header">
        <view class="col-75 col-offset-5 light">
            <view class="padding-left " style="font-size: 0.8rem!important;">账号总金额</view>
            <view class="padding-top " style="font-size: 1.8rem!important;">￥666.66</view>
        </view>
        <view class="col-20 text-center">
            <text class="icon iconfont icon-balance " style="color: #FFD700;font-size: 1.9rem!important;"></text>
        </view>
    </view>
    <view class="list">

        <navigator url="recharge" open-type="navigate" class="item item-icon-left item-icon-right">
            <text class="icon iconfont icon-chongzhi" style="color: #11c1f3"></text>
            <view class="h2">充值</view>
            <text class="icon-accessory iconfont icon-right"></text>
        </navigator>
        <navigator url="" open-type="navigate" class="item item-icon-left item-icon-right">
            <text class="icon iconfont icon-tixian" style="color: #33cd5f"></text>
            <view class="h2">提现</view>
            <text class="icon-accessory iconfont icon-right"></text>
        </navigator>
        <view class="padding-top"></view>
        <navigator url="" open-type="navigate" class="item item-icon-left item-icon-right">
            <text class="icon iconfont icon-yinxingqia" style="color: #FFD700"></text>
            <view class="h2">银行卡<text class="item-note">0张</text></view>
            <text class="icon-accessory iconfont icon-right"></text>
        </navigator>
        <navigator url="" open-type="navigate" class="item item-icon-left item-icon-right">
            <text class="icon iconfont icon-jiaoyijilu" style="color: #ef473a"></text>
            <view class="h2">交易记录</view>
            <text class="icon-accessory iconfont icon-right"></text>
        </navigator>
    </view>
</view>

二、wxss样式文件代码如下：

/* pages/wallet/wallet.wxss */
.icon:not(.icon-right), .iconfont:not(.icon-right) {
    color: #00ACFF;
    font-size: 1.5rem !important;
}
.header{
    height: 6rem;
    background-color: #00ACFF;
}

三、js页面代码如下：

// pages/wallet/wallet.js
var app = getApp();
var util = require('../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      util.isLoginModal();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

模板简介：该模板名称为【微信小程序蓝色风格个人钱包页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。