• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

VantWeapp小程序蹲坑之使用card组件显示价格

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多。网络上所谓的“坑”总结,仅仅不过是其开发中所遭所遇之“坑”而已——估计后面的“坑”还多着呢!根据本人粗浅分析,这些“坑”与微信官方格式有密切关系。另一方面,只有“不会导致内存泄漏”的坑,广大开发人员应该还是会体谅的。

言归正传,今天在使用card组件显示价格时出现问题了。问题的最初来由是我想把官方提供的H5版本转换成小程序版本,参考下图:

吸引人的是,在Vant 1.6.8版本中提供了如下图所示的示例页面:

够可以的吧,只要稍加修改,便可为我所用了!但是......
在分析其对应的github源码时,发现如下代码(为了便于参考,还是复制大部分吧):

<template>
  <div>
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      <van-checkbox
        class="card-goods__item"
        v-for="item in goods"
        :key="item.id"
        :name="item.id"
      >
        <van-card
          :title="item.title"
          :desc="item.desc"
          :num="item.num"
          :price="formatPrice(item.price)"
          :thumb="item.thumb"
        />
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
      :price="totalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
export default {
  components: {
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [SubmitBar.name]: SubmitBar,
    [CheckboxGroup.name]: CheckboxGroup
  },
  data() {
    return {
      checkedGoods: ['1', '2', '3'],
      goods: [{
        id: '1',
        title: '进口香蕉',
        desc: '约250g,2根',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
      }, {
        id: '2',
        title: '陕西蜜梨',
        desc: '约600g',
        price: 690,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
      }, {
        id: '3',
        title: '美国伽力果',
        desc: '约680g/3个',
        price: 2680,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
      }]
    };
  },
  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '结算' + (count ? `(${count})` : '');
    },
    totalPrice() {
      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
    }
  },
  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    onSubmit() {
      Toast('点击结算');
    }
  }
};
</script>

注意其中这一段中的价格部分:

<van-card
          :title="item.title"
          :desc="item.desc"
          :num="item.num"
          :price="formatPrice(item.price)"
          :thumb="item.thumb"
        />

这里使用了v-bind方法显示价格,其中使用了带参数函数的计算方法。一切看似非常一般,但是问题就在这里!
测试结果是价格部分不显示。

初步答案

经过分析小程序版本的vant weapp组件card并结合进一步测试得到如下结论:

在mpvue+vant weapp小程序开发环境下,这里card组件的价格部分不能使用带参数的函数计算方式,具体结论见下表:

表达形式 结果
:price="formatPrice(item.price)" 不显示
:price="Math.sin(1)+67" 不显示
:price="Math.PI"  不显示
:price="item.price" 显示正常
:price="item.price/100" 显示正常
:price="formatPrice()" 不显示 !
:price="formatPrice" 显示正常!

需要注意的是,表格中最后两行。其中,formatPrice()是函数形式,不可以,而且出现错误提示。但是,最后一行使用不带括号的formatPrice而且这个formatPrice放在计算属性(computed)中完全可以!

进一步分析

有关vue开发中computed段与methods段的区别在网络上有很多介绍,在此不赘述。但是,有一点需要明确,就是:
methods段中你可以根据需要创建任意形式的带参数或者不带参数的函数;但是,computed段中你只能创建不带参数的函数(不算setter函数)。上面表格最后一行中的formatPrice正是computed段中的一个无参数函数。
但是,在本文上面案例中,是要求以v-for循环指令方式显示每一件商品的价格的,因此,需要传递一个代表当前商品id的参数,但遗憾的是,这种带参数的函数是无法在computed段中表达的。
其实,进一步分析这个函数formatPrice的内容:

formatPrice(price) {
      return (price / 100).toFixed(2);
    }

也不过是对于传递的价格参数缩小了100倍(因默认单位是分),然后保留两位小数。于是,我推荐使用如下方案:

:price="item.price/100" 

也就是说,把分转换成元单位即可,保留小数的任务可以交由服务端完成。

主要参考

https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue
https://www.jianshu.com/p/579035fc9c18

转载于:https://blog.51cto.com/zhuxianzhong/2359041


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序相关(一)发布时间:2022-07-18
下一篇:
微信小程序组件化开发框架WePY发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap