vant weapp UI之submitbar组件价钱显示有问题

ゝ一世哀愁。 2023-06-28 11:22 1阅读 0赞

## 效果 ##

![20200109101734298.png][]

## 问题 ##

之前因为项目测试支付，所以价钱一直都是0.01。然后渲染在组件上面价钱就一直变成了0。接口数据返回是对的，页面上传参也没问题，那就只有去读源码了。

然后本人发现这个submit-bar组件中对价钱进行了处理的。如下图红线处：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70][]

组件中把价钱除了100，且做了四舍五入处理。toFixed（）是把Number 四舍五入为指定小数位数的数字。

所以就把我穿的值0.01四舍五入成了0。

## 解决 ##

将你的价钱参数\*100，这样就是正常显示了

### index.wxml ###

<van-submit-bar
         price="{
       { item.totalFee*100 }}"
         safe-area-inset-bottom="{
       {true}}"
         button-text="提交订单"
         bind:submit="toPay"
    />

### 总结 ###

虽然这是个小问题，但是vant weapp官方文档中组件示例并没有给出具体的说明，望改善。

遇到问题，要努力找出原因。共勉！！！

[20200109101734298.png]: https://img-blog.csdnimg.cn/20200109101734298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200109102105279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序快速引入vant-weapp组件库（适合小白）

阅读本篇文章之前，相信你已经对小程序有了很深刻的认知及了解。 * 小程序官方npm使用介绍[点击直达][Link 1] * vant-weapp组件库安装官方介...

野性酷女/ 2024年04月19日 11:17/ 0 赞/ 100 阅读

相关 Vant Weapp的Dialog.confirm组件报错？

先上图：![abb6038970f54b9989f386b01a6100a7.png][] 遇到问题，先不慌，面向百度编程，搜索关键字给出的答案大都是这样的： ![a6a4

「爱情、让人受尽委屈。」/ 2023年09月23日 15:59/ 0 赞/ 149 阅读

相关说说如何安装与配置 Vant Weapp 小程序 UI 组件库

Vant Weapp 是移动端 Vue 组件库 [Vant][] 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，帮忙开发者快速搭建小程序应用。 1 安装

墨蓝/ 2023年07月22日 09:12/ 0 赞/ 65 阅读

相关 vant weapp UI之submitbar组件价钱显示有问题

效果 ![20200109101734298.png][] 问题之前因为项目测试支付，所以价钱一直都是0.01。然后渲染在组件上面价钱就一直变成了0。接口数据返

ゝ一世哀愁。/ 2023年06月28日 11:22/ 0 赞/ 2 阅读

相关小程序实现vant weapp UI的van-index-bar组件（城市列表）

效果 van-index-bar组件地址：[https://youzan.github.io/vant-weapp/\/index-bar][https_youzan.g

刺骨的言语ヽ痛彻心扉/ 2023年06月23日 13:14/ 0 赞/ 58 阅读

相关 uni-app引入UI组件库(Vant-weapp)

uni-app引入UI组件库(Vant-weapp) 1. 新建相关目录根目录下创建 `wxcomponents` wxcomponents下新建`van

素颜马尾好姑娘i/ 2023年05月28日 12:57/ 0 赞/ 208 阅读

相关微信小程序之引入使用Vant Weapp组件

Vant Weapp官网地址：https://youzan.github.io/vant-weapp/\/quickstart，自己可以去其官网详细了解。 ![在这里插入图片

清疚/ 2023年03月14日 13:20/ 0 赞/ 75 阅读

相关小程序接入vant Weapp组件的详细步骤

大家好，我是[小佑@小佐：https://blog.csdn.net/Smell\_rookie][https_blog.csdn.net_Smell_rookie]，是一名页

红太狼/ 2022年12月18日 07:56/ 0 赞/ 289 阅读

相关 vant-weapp组件得外部样式类引用说明

以[时间选择插件datetime-picker][datetime-picker]为例 <van-datetime-picker type="datetime" va

￡神魔★判官ぃ/ 2021年12月09日 04:05/ 0 赞/ 499 阅读

相关 uni-app引入UI组件库(Vant-weapp)步骤

1. 创建目录在项目根目录中创建wxcomponents目录在wxcomponents目录中创建vant目录 ![在这里插入图片描述][202

梦里梦外;/ 2021年09月13日 15:56/ 0 赞/ 1342 阅读