VantWeapp小程序蹲坑之使用card組件顯示價格

問題

在基于mpvue＋Vant Weapp組件庫實戰(zhàn)過程中，問題越來越多。網(wǎng)絡上所謂的“坑”總結，僅僅不過是其開發(fā)中所遭所遇之“坑”而已——估計后面的“坑”還多著呢！根據(jù)本人粗淺分析，這些“坑”與微信官方格式有密切關系。另一方面，只有“不會導致內存泄漏”的坑，廣大開發(fā)人員應該還是會體諒的。

創(chuàng)新互聯(lián)專注于寶塔網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供寶塔營銷型網(wǎng)站建設，寶塔網(wǎng)站制作、寶塔網(wǎng)頁設計、寶塔網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務，打造寶塔網(wǎng)絡公司原創(chuàng)品牌,更為您提供寶塔網(wǎng)站排名全網(wǎng)營銷落地服務。

言歸正傳，今天在使用card組件顯示價格時出現(xiàn)問題了。問題的最初來由是我想把官方提供的H5版本轉換成小程序版本，參考下圖：
Vant Weapp小程序蹲坑之使用card組件顯示價格

吸引人的是，在Vant 1.6.8版本中提供了如下圖所示的示例頁面：
Vant Weapp小程序蹲坑之使用card組件顯示價格

夠可以的吧，只要稍加修改，便可為我所用了！但是......
在分析其對應的github源碼時，發(fā)現(xiàn)如下代碼（為了便于參考，還是復制大部分吧）：

<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方法顯示價格，其中使用了帶參數(shù)函數(shù)的計算方法。一切看似非常一般，但是問題就在這里！
測試結果是價格部分不顯示。

初步答案

經(jīng)過分析小程序版本的vant weapp組件card并結合進一步測試得到如下結論：

在mpvue＋vant weapp小程序開發(fā)環(huán)境下，這里card組件的價格部分不能使用帶參數(shù)的函數(shù)計算方式，具體結論見下表：

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

需要注意的是，表格中最后兩行。其中，formatPrice()是函數(shù)形式，不可以，而且出現(xiàn)錯誤提示。但是，最后一行使用不帶括號的formatPrice而且這個formatPrice放在計算屬性（computed）中完全可以！

進一步分析

有關vue開發(fā)中computed段與methods段的區(qū)別在網(wǎng)絡上有很多介紹，在此不贅述。但是，有一點需要明確，就是：
methods段中你可以根據(jù)需要創(chuàng)建任意形式的帶參數(shù)或者不帶參數(shù)的函數(shù)；但是，computed段中你只能創(chuàng)建不帶參數(shù)的函數(shù)（不算setter函數(shù)）。上面表格最后一行中的formatPrice正是computed段中的一個無參數(shù)函數(shù)。
但是，在本文上面案例中，是要求以v-for循環(huán)指令方式顯示每一件商品的價格的，因此，需要傳遞一個代表當前商品id的參數(shù)，但遺憾的是，這種帶參數(shù)的函數(shù)是無法在computed段中表達的。
其實，進一步分析這個函數(shù)formatPrice的內容：

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

也不過是對于傳遞的價格參數(shù)縮小了100倍（因默認單位是分），然后保留兩位小數(shù)。于是，我推薦使用如下方案：

:price="item.price/100"

也就是說，把分轉換成元單位即可，保留小數(shù)的任務可以交由服務端完成。

主要參考

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

文章題目：VantWeapp小程序蹲坑之使用card組件顯示價格
當前網(wǎng)址：http://muchs.cn/article36/gpjcpg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、面包屑導航、做網(wǎng)站、網(wǎng)站內鏈、品牌網(wǎng)站制作、響應式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容