This paper introduces some problems that should be paid attention to when using the submit bar component in the development of Vant Weapp applet. Pit to pit, first on the sample code bar, from simple to complex order.

main.js code

main.json code

index.vue code

<template>
  <view>
    <van-panel title="Basic usage">
      <van-submit-bar
        :price="3050"
        button-text="place order"
        @submit="onClickButton"
        custom-class="van-submit-bar"
        safe-area-inset-bottom="false"
      />
    </van-panel>

    <van-panel title="Forbidden state">
      <van-submit-bar
        disabled
        :price="3050"
        button-text="place order"
        tip="Your receiving address does not support intra city delivery, We have recommended express delivery for you"
        @submit="onClickButton"
        custom-class="van-submit-bar"
        safe-area-inset-bottom="false"
      />
    </van-panel>

    <van-panel title="Loading state">
      <van-submit-bar
        loading
        :price="3050"
        button-text="place order"
        @submit="onClickButton"
        custom-class="van-submit-bar"
        safe-area-inset-bottom="false"
      />
    </van-panel>

    <van-panel title="Advanced Usage">
      <van-submit-bar
        :price="3050"
        button-text="place order"
        @submit="onClickButton"
        custom-class="van-submit-bar"
        tip="true"
        safe-area-inset-bottom="false"
      >
        <van-tag type="primary" custom-class="van-tag">Label</van-tag>
        <view slot="tip">
          //Your receiving address does not support intra city delivery
          <text class="edit-address"@tap="onClickLink">Modify address</text>
        </view>
      </van-submit-bar>
    </van-panel>

    <van-toast id="van-toast"/>
  </view>
</template>
<script>
  import Toast from '../../../static/vant/toast/toast'
  export default {
    data() {
      return {
      }
    },
    methods: {
      onClickButton() {
        Toast('Click button');
      },
      onClickLink() {
        Toast('Modify address');
      }
    }
  }
</script>
<style>
  .van-submit-bar {
    position: relative !important;
  }
  .edit-address {
    color: #1989fa;
  }
  .van-tag {
    margin-left: 15px;
  }
</style>

Operation effect

Pit s

In summary, using the submit bar component has at least the following small pits to note:
(1) "price="3050 "is used above, and" sheep horn ":" cannot be omitted here. In the general van weapp component attribute expression, you only need to write it as price="3050". Interested friends can try to trace and analyze the component principle of applet customization, the source code of van weapp component and the transformation logic of mpvue framework. If there is no colon, the price number and RMB symbol will not be displayed!
(2) pay attention to the following sentence:
< text class = "Edit address" @ tap = "onclicklink" > Modify address < / text >
The < text / > here is the native component of the applet. In mpvue framework + van t weweapp component library components, there is basically no problem in using the native components of the applet, but it is worth noting in some places. For example, if you use native code expression, it should be as follows:
< text class = "Edit address" bindtap = "onclicklink" > Modify address < / text >

There's probably nothing else.