问题描述
随着小程序的快速发展，越来越多的app都出台了小程序。不再需要去下载淘宝或者京东等一些购物app来满足购物需求，而是通过微信小程序来进行购物，这样不仅方便而且不浪费手机储存空间。那么，在小程序中如何来实现商品的订单栏和导航栏的呢？
解决方案
订单栏和导航栏是由很多的组件组合在一起的，按钮，栏，图标，文字描述等。需要在json中引用vant组件，然后在wxml中调用，最后再对内容进行属性设置。
一、订单栏
1.在json中调用van-tab组件。
代码示例：
"usingComponents": {
"van-submit-bar": " /dist/submit-bar/index" }
}
2.在wxml中实现。
Price设置订单的价格，
button-text="提交订单"设置按钮，
submit设置按钮点击事件回调，
tip设置提示文案。
代码示例：
<van-submit-bar
price="{{ 3050 }}"
button-text="提交订单"
bind:submit="onClickButton"
tip="{{ true }}"
>
<van-tag type="primary">全选</van-tag>
<view slot="tip">
您的收货地址不支持同城送, <text>修改地址</text>
</view>
</van-submit-bar>
图 1 效果图
二、商品导航栏
1.在json中调用van-tab组件。
代码示例：
"usingComponents": {
"van-goods-action": "/dist/goods-action/index",
"van-goods-action-icon": "/dist/goods-action-icon/index",
"van-goods-action-button":"/dist/goods-action-button/index"
}
2.在wxml中实现。
icon:设置图标类型，
text：设置文字，
info ：设置提示数字，
type：设置按钮形式。
代码示例：
<van-goods-action >
<van-goods-action-icon icon="chat-o" text="客服" dot />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
<van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-button text="加入购物车" type="warning" />
<van-goods-action-button text="立即购买" />
</van-goods-action>
图 2 效果图
END编 辑 | 王文星
责 编 | 江汪霖
where2go 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
