微信小程序 实现底部导航栏tabbar

最新推荐文章于 2024-08-07 22:38:02 发布
最新推荐文章于 2024-08-07 22:38:02 发布
阅读量5.9k 收藏 44
点赞数 8
分类专栏： 前端（微信小程序、Web开发等）
原文链接：https://www.jianshu.com/p/ce1c3c25527c
版权

参考链接：
（1）微信小程序底部导航Tabbar
https://www.cnblogs.com/huangjialin/p/6278429.html
（2）小程序自定义tabbar实现中间图标突出效果(附带wx.hideTabBar不生效的bug解决方案)
https://www.jianshu.com/p/ce1c3c25527c
（3）微信小程序入门四: 顶部、导航栏样式、tabBar导航栏
https://blog.csdn.net/haibo0668/article/details/80651680
（4）微信小程序自定义tabbar组件点击对应区域显示凸起效果
https://blog.csdn.net/nan961136007/article/details/103913052

一、例子1

底部导航栏这个功能是非常常见的一个功能，基本上一个完成的app，都会存在一个导航栏，那么微信小程序的导航栏该怎么实现呢？经过无数的踩坑，终于实现了，好了，先看看效果图。
在这里插入图片描述
对于底部导航栏，小程序上给出的文档要求里面的item最少2个，最多五个。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black"
  },

  "tabBar": {
   "color": "#a9b7b7",
   "selectedColor": "#11cd6e",
   "borderStyle": "black" ,
   "list": [{
     "selectedIconPath": "images/icon_consult_press.png",
     "iconPath": "images/icon_consult.png",
     "pagePath": "pages/index/index",
     "text": "首页"
   }, {
     "selectedIconPath": "images/icon_invest_press.png",
     "iconPath": "images/icon_invest.png",
     "pagePath": "pages/logs/logs",
     "text": "一元投"
   },{
     "selectedIconPath": "images/icon_mine_press.png",
     "iconPath": "images/icon_mine.png",
     "pagePath": "pages/mine/mine",
     "text": "我的"
   }
   ]
 }
}

解释一下这些属性是什么意思：

  • tabBar 指底部的 导航配置属性
  • color 未选择时 底部导航文字的颜色
  • selectedColor 选择时 底部导航文字的颜色
  • borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）
  • list 导航配置数组
  • selectedIconPath 选中时 图标路径
  • iconPath 未选择时 图标路径
  • pagePath 页面访问地址
  • text 导航图标下方文字

需要注意一些小问题：

  • 每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错
  • "pages":[ "pages/index/index", "pages/logs/logs", "pages/mine/mine" ],

这个页面的注册一定要注意，第一个一定是要是最先显示的，否则会出现底部导航看不到。

二、例子2

github传送门 https://github.com/SuRuiGit/wxapp-customTabbar
在这里插入图片描述
集成到项目
第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片(建议把tabbarComponent目录与pages同级)
在这里插入图片描述
在这里插入图片描述
第二步：到app.json中配置tabBar，如果tabbar中间的按钮是跳到二级页面，就不要配置在tabBar的list中，如果配置了，中间的按钮点击是无效的，要注意。
在这里插入图片描述
第三步：在app.js的onLaunch方法中调用hidetabbar()自己封装一下，代码如下，隐藏系统自带的tabBar直接写wx.hideTabBar在安卓8.0有bug，并且在每一个用到tabbar的js文件中的onReady和onShow中调用一下app.hidetabbar()，调用getSystemInfo()方法获取设备信息，主要是为了适配iPhone X，这个方法在下面会给出。
在这里插入图片描述

//自己对wx.hideTabBar的一个封装
hidetabbar() {
    wx.hideTabBar({
      fail: function() {
        setTimeout(function() { // 做了个延时重试一次，作为保底。
          wx.hideTabBar()
        }, 500)
      }
    });
  },
getSystemInfo: function() {
    let t = this;
    wx.getSystemInfo({
      success: function(res) {
        t.globalData.systemInfo = res;
      }
    });
  },

第四步：在app.js中的globalData中加入自定义tabbar和systemInfo的参数，再加入一个方法给tabBar.list配置中的页面使用，代码如下。

editTabbar: function() {
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },
globalData: {
    systemInfo: null,//客户端设备信息
    tabBar: {
      "backgroundColor": "#ffffff",
      "color": "#979795",
      "selectedColor": "#1c1c1b",
      "list": [
        {
          "pagePath": "/page/index/index",
          "iconPath": "icon/icon_home.png",
          "selectedIconPath": "icon/icon_home_HL.png",
          "text": "首页"
        },
        {
          "pagePath": "/page/myRelease/index",
          "iconPath": "icon/icon_release.png",
          "isSpecial": true,
          "text": "发布"
        },
        {
          "pagePath": "/page/mine/index",
          "iconPath": "icon/icon_mine.png",
          "selectedIconPath": "icon/icon_mine_HL.png",
          "text": "我的"
        }
      ]
     }
  }

第五步：在tabBar的list中配置的页面的.js文件的data中加入tabbar:{}，并在onload方法中调用app.editTabbar();

第六步：在tabBar的list中配置的页面的.json文件中加入"usingComponents": { “tabbar”: “…/…/tabbarComponent/tabbar” }在.wxml文件中加入

第七步：修改tabbarComponent->tabbar.js->data中的代码，代码截图如下
这里就是作者的一个小bug，本来作者写的是==‘iPhone X’，在模拟器上没有问题，但是真机上返回的却不是这个字段，所以我们要改成包含
在这里插入图片描述

三、例子3

小程序的导航栏样式在app.json中定义。这里设置导航，背景黑色，文字白色，文字内容测试小程序
app.json内容：

{
  "pages":[
    "pages/index/index",
    "pages/login/login",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"red",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "测试小程序",
    "navigationBarTextStyle":"#fff"
  }
}

在这里插入图片描述
tabBar挺好的，可以放置于顶部或者底部，用于不同功能页面的切换。tabBar同样在app.json中进行定义，看一下我在app.json中对tabBar的相关定义：

  "tabBar": {
    "selectedColor": "#1296db",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/ico-home.png",
      "selectedIconPath": "images/ico-home-d.png"
    },{
      "pagePath": "pages/setting/setting",
      "text": "设置",
      "iconPath": "images/ico-setting.png",
      "selectedIconPath": "images/ico-setting-d.png"
    },{
      "pagePath": "pages/help/help",
      "text": "帮助",
      "iconPath": "images/ico-help.png",
      "selectedIconPath": "images/ico-help-d.png"
    }]
  }

在这里插入图片描述

四、例子4

在这里插入图片描述
首先呢，先创建template文件夹，里面包含wxml，wxss和 js。

wxml文件

<view class='footer'>
  <view class='footer_list' data-current="{{0}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===0}}' src="{{listInfo[0].imgUrl}}"></image>
    <view hidden='{{curIdx!==0}}' class="tab-img">
      <image class="footer-image2" src="{{listInfo[0].curUrl}}"></image>
    </view>
    <!-- 等于该id的话图标和名称就凸起来 -->
    <view class="footer-text">首页</view>
    <view hidden='{{curIdx!==0}}' class="footer-text2">首页</view>
  </view>

  <view class='footer_list' data-current="{{1}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===1}}' src="{{listInfo[1].imgUrl}}"></image>
    <view hidden='{{curIdx!==1}}' class="tab-img">
      <image class="footer-image2" src="{{listInfo[1].curUrl}}"></image>
    </view>
    <view class="footer-text">分类</view>
    <view hidden='{{curIdx!==1}}' class="footer-text2">分类</view>
  </view>

  <view class='footer_list' data-current="{{2}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===2}}' src="{{listInfo[2].imgUrl}}"></image>
    <view hidden='{{curIdx!==2}}' class="tab-img">
      <image class="footer-image2" src="{{listInfo[2].curUrl}}"></image>
    </view>
    <view class="footer-text">购物车</view>
    <view hidden='{{curIdx!==2}}' class="footer-text2">购物车</view>
  </view>

  <view class='footer_list' data-current="{{3}}" bindtap="chooseImg">
    <image class="footer-image" hidden='{{curIdx===3}}' src="{{listInfo[3].imgUrl}}"></image>
    <view hidden='{{curIdx!==3}}' class="tab-img">
      <image class="footer-image2" src="{{listInfo[3].curUrl}}"></image>
    </view>
    <view class="footer-text">个人中心</view>
    <view hidden='{{curIdx!==3}}' class="footer-text2">个人中心</view>
  </view>
</view>

wxss文件

page {
  background: #f8f7f6;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 105rpx; /*footer的高度*/
  background: #fff;
  z-index: 500;
  border-top: 1rpx solid #e9e9e9;
  display: flex;
  flex-direction: row;
}
.footer_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.footer-image {
  width: 50rpx;
  height: 50rpx;
  margin-top: 10rpx;

}
.footer-image2 {
  width: 50rpx;
  height: 50rpx;
  margin-top: 20rpx;
}
.footer-text2 {
  font-size: 24rpx;
  margin-top: 15rpx;
  color: #896D59;
}
.tab-img {
  position: absolute;
  top: -36rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}
.footer-text {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #896D59;
}

js文件

// pages/template/template.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    listInfo: [{
      text: '首页',
      imgUrl: '/pages/images/main.png',
      curUrl: '/pages/images/mian_lo1_on.png',
    },
    {
      text: '分类',
      imgUrl: '/pages/images/mian_lo2.png',
      curUrl: '/pages/images/mian_lo2_on.png',
    },
    {
      text: '购物车',
      imgUrl: '/pages/images/mian_lo3.png',
      curUrl: '/pages/images/mian_lo3_on.png',
    },
    {
      text: '个人中心',
      imgUrl: '/pages/images/mian_lo4.png',
      curUrl: '/pages/images/mian_lo4_on.png',
    }]
  },
  // 底部导航
  chooseImg: function (e) {
    var that = this
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    console.log("kk", e.currentTarget.dataset.current)
    if (e.currentTarget.dataset.current == 0) {
      wx.switchTab({
        url: '/pages/index/index',
      })
    } else if (e.currentTarget.dataset.current == 1) {
      wx.switchTab({
        url: '/pages/classify/classify',
      })
    } else if (e.currentTarget.dataset.current == 2) {
      wx.switchTab({
        url: '/pages/car/car',
      })
    } else if (e.currentTarget.dataset.current == 3) {
      wx.switchTab({
        url: '/pages/person/person',
      })
    }
    that.onShow();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  },
})

app.json文件

{
  "pages": [
    "pages/index/index",
    "pages/classify/classify",
    "pages/car/car",
    "pages/person/person",
    "pages/template/template"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "你们项目的名字",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#896D59",
    "selectedColor": "#896D59",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/main.png",
        "selectedIconPath": "pages/images/mian_lo1_on.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "pages/images/mian_lo2.png",
        "selectedIconPath": "pages/images/mian_lo2_on.png"
      },
      {
        "pagePath": "pages/car/car",
        "text": "购物车",
        "iconPath": "pages/images/mian_lo3.png",
        "selectedIconPath": "pages/images/mian_lo3_on.png"
      },
      {
        "pagePath": "pages/person/person",
        "text": "个人中心",
        "iconPath": "pages/images/mian_lo4.png",
        "selectedIconPath": "pages/images/mian_lo4_on.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

app.js文件

//app.js
App({
  onLaunch: function () {
    //隐藏系统tabbar
    wx.hideTabBar();

    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow: function () {
    //隐藏系统tabbar
    wx.hideTabBar();
  },
  globalData: {
    userInfo: null
  }
})

app.js的重点是隐藏小程序自带的tabbar，让你自定义的组件得以显示，并且不被占位置。

然后是每个界面的引用了，你想在哪个界面显示这个tabbar，就放进去以下代码。比如index首页嘛，记得看你们的层级引用模板文件哦，不然会报错的。

wxml文件

<import src='../../template/template.wxml' />
<view>
  <include src="/pages/template/template.wxml" />
</view>

wxss文件

@import "../template/template.wxss";

js文件

Page({
  data: {
	listInfo: [{
        text: '首页',
        imgUrl: '/pages/images/main.png',
        curUrl: '/pages/images/mian_lo1_on.png',
      },
      {
        text: '分类',
        imgUrl: '/pages/images/mian_lo2.png',
        curUrl: '/pages/images/mian_lo2_on.png',
      },
      {
        text: '购物车',
        imgUrl: '/pages/images/mian_lo3.png',
        curUrl: '/pages/images/mian_lo3_on.png',
      },
      {
        text: '个人中心',
        imgUrl: '/pages/images/mian_lo4.png',
        curUrl: '/pages/images/mian_lo4_on.png',
      }],
      // 底部导航
  chooseImg: function(e) {
    var that = this
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    console.log("kk", e.currentTarget.dataset.current)
    if (e.currentTarget.dataset.current == 0) {
      wx.switchTab({
        url: '/pages/index/index',
      })
    } else if (e.currentTarget.dataset.current == 1) {
      wx.switchTab({
        url: '/pages/classify/classify',
      })
    } else if (e.currentTarget.dataset.current == 2) {
      wx.switchTab({
        url: '/pages/car/car',
      })
    } else if (e.currentTarget.dataset.current == 3) {
      wx.switchTab({
        url: '/pages/person/person',
      })
    }
    that.onShow();
  },
  onLoad: function(options) {
    var curIdx = 0
    this.setData({
      curIdx: curIdx,
    })

  },
  onShow: function() {
    this.onLoad();
  },
})
Jxufe渣渣斯
关注
专栏目录
微信小程序 自定义底部导航栏
开发路上的AZhe
09-16 1820
自定义底部导航需写一个共用模板： （名称自定义） <template name="nav"> <view class="nav_link" bindtap="{{fn}}"> <button class="defalut_btn {{current==0?'':'on_cor'}}...
微信小程序（二）----------微信小程序自定义底部导航栏tabBar
地铁上的程序员
01-17 4239
1、说明 微信提供的tabBar很好用，但是也有很多限制，不能直接监控点击事件，也不能做酷炫的底部导航栏，想要实现个性化的底部导航栏那就自己写一个吧。 2、自定义导航栏实现步骤 2.1、模板的制作 小程序提供的公共模板的使用，将模板写在&lt;template name=""&gt;&lt;/template&gt;标签里面，这个页面也要加在app.json的pages里面，值得一提的是，...
微信小程序自定义tabbar导航栏
maktoub的博客
10-11 889
大多数的小程序具有发布的功能，想要实现突出的加号的发布按钮的实现，针对这些问题可以设计自定义的tabbar。功能较为单一，无法实现多窗口的切换和自定义功能，难以满足复杂的应用场景。样式和布局固定，缺乏灵活性和个性化，难以满足不同用户的需求。只是这里需要一些注意点，不注意的话会导致不能正确显示的问题。微信的官方api中其实是有自定义tabbar的介绍的。首先需要配置app.json。这里是第一个注意点，这里的。一、官方文档中提到，需要。
微信小程序 - 自定义底部菜单栏
最新发布
觉醒法师的专栏
08-07 2098
微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。
微信小程序之底部导航栏——tabBar
热门推荐
champion0324的博客
09-23 5万+
微信的开发文档里有，很多人也写了，自己写一遍，加深印象罢！ 在学习Android的时候，被模仿一个app的界面，实现其UI。而一般来说，总是避免不了导航栏的。 比较大众化的，就是底部导航栏啦，而实现的方式也是非常的多，如：Fragment+ViewPage Or 来一个RadioGroup Or 以前的TabHost 等~ 效果，是一样或差不多的，而实现手法，是五花八门特色鲜明的！ 在
微信小程序设置底部导航栏
m0_60708088的博客
05-15 387
微信小程序设置底部导航栏_shykevin的博客-CSDN博客
微信小程序(底部导航栏tabBar)
诡白丷的博客
11-15 441
微信小程序-底部导航栏tabBar 基本结构 基本结构： “tabBar”:{ "list":[{ **标签**:"内容", **标签**:“内容”, .... }] } 标签关键词 **
微信小程序自定义组件实现 tabBar、navBar
weixin_34392843的博客
01-13 1071
久不写文，手有些生，见谅。 最近App项目要将其中一个模块抽出来做成小程序， 功能包含 ：底部的Tab栏，顶部的标题栏 这里选择自定义的原因有两点： narBar 微信原生不支持设置返回图标，且在 Android 上标题是居左显示，在 iOS 上是居中显示。 底部的 tabBar 不支持点击跳页面，图标布局不支持超过 tabBar 的高度。 下面两张图是简单实现的效果。 实现分析 源码地...
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航
11-01
内容概要： ...2、使用自定义底部导航 custom-tab-bar优雅实现微信小程序动态tabBar。 适合人群： 1、具备一定编程基础，熟悉小程序开发者 能学到什么： 1、使用自定义组件，完全接管 tabBar 的渲染。
微信小程序底部导航栏——tabBar
weixin_48553717的博客
05-04 1万+
微信小程序底部导航栏——tabBar 微信小程序底部导航栏是一个常见的基础的功能，下面就让我们一起来探索吧！ 首先上图：完成之后就是这样的效果 对于底部导航栏，小程序上给出的文档要求里面的item最少2个，最多五个。 首先在项目中找到这个文件 话不多说上代码： "tabBar": { "selectedColor":"#33a3dc", "list": [ { "pagePath": "pages/home/home",
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航-更新版（支持自由组合总数超过5个tabBar菜单）
01-03
2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。 4、本示例是7个底部导航，分2种权限，权限1显示1，2，3；权限2显示4，5...
微信小程序自定义菜单切换栏tabbar组件代码实例
10-15
自定义菜单切换栏tabbar组件是微信小程序中用于底部导航的一个重要组件，它允许开发者自定义底部的导航栏，为用户提供快速切换不同页面的功能。 在微信小程序中，tabbar是固定在小程序底部的一个导航栏，用户可以...
微信小程序——底部导航栏
weixin_61972561的博客
05-17 779
微信小程序——底部导航栏
微信小程序底部导航栏
Zhuchang1999的博客
04-13 1499
要在app.json里配置"taBar",(app.json 用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。) taBar:底部导航配置属性 pagePath作用:导航栏所连接的界面 text:导航图标下方的文字 iconPath:未选中图标路径 selectedIconPath:选中时图标路径 list:导航配置数组 注意： list里面的...
微信小程序之底部导航栏（一）
llixiangjian的博客
08-15 1587
前两周很忙碌的边学就边做项目了，时间很赶，还没好好的总结一下，开发的时候自己就首先去看了小程序的API和对其目录结构的了解以及其工具的使用。 在了解完这些后开始进行对小程序开发的设计进行了大体的规划及搭建，其实小程序跟Android界面设计基本都那样。 好了，就从自己搭建项目开始的每个小块进行开始。 下面是对“tabBar”的简单应用，小程序API也可以直接进行拷贝复制小程序API 的htt
微信小程序添加底部导航栏
一天一小步，梦想一大步
05-02 2万+
我们平时上微信可以看到，微信的底部是4个导航栏选项进行切换的，我们自己开发小程序时，如果要添加像微信那样的底部导航栏的话，其实实现方式非常简单，便捷。在微信小程序开发IDE中，我们新建一个小程序项目，一下这些是必带的原有的一些文件。要添加底部导航的信息，我们需要在“app.json”这个文件中加入“tabBar”这个参数，例如："tabBar": { "color": "#a9b7b7", ...
微信小程序_设置底部导航栏
qq_16683689的博客
03-19 1万+
微信小程序_底部导航栏设置 1.准备静态资源导航栏图片(格式是png)放到images文件夹下面 images文件夹下准备的图标 2.选中配置文件app.json 3.添加tabBar底部导航栏配置 注意:tabBar中的属性pagePath路径必须是要在pages中已经配置好的路径,如果没有设置好,会报路径找不到的错误 4.最终底部栏效果 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值