持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

在我们浏览商城或者外卖小程序APP的时候，经常会看到下图的结算总额的功能，这个功能的实现还是比较简单的，效果如下图：

圆形按钮加减价格

• home.wxml中的代码，具体是通过vant weapp组件库中的van-stepper组件进行了加减商品按钮的添加，这个组件使用起来非常方便，后续可以绑定算总商品价格的函数功能，进行合计的运算，具体的代码如下：

        <van-stepper data-id="{{item.id}}" value="{{ 0 }}" min="0" theme="round" button-size="15px" bind:plus="onAddPrice" bind:minus="onSubPrice" />
      

这里使用了vant weapp组件中的van-stepper组件，方便了我们开发小程序,组件具体链接：youzan.github.io/vant-weapp/…

商品的价格区域

• home.wxml中的代码：

        <view class="price">￥{{item.SaleAmount}}</view>
        <van-tag round type="success">{{item.SaleMount}}</van-tag>

这里使用了vant weapp组件中的vant-tag组件，组件链接：youzan.github.io/vant-weapp/…

底部结算区域

<view  bindtap="jumpDetail">
 <van-submit-bar
  price="{{ totalPrice }}"
  button-text="提交订单"
  bind:submit="onSubmit"
/>
</view>

这里使用了vant weapp中的vant-submit组件，组件链接：youzan.github.io/vant-weapp/…

将上面几个组件结合以下，再添加自己的商品，基础展示就如下图所示：

后续，还有一些按钮，组件需要绑定一些功能，后续的加商品结算总额以后再更新。