微信小程序|订单栏和商品导航栏
问题描述
随着小程序的快速发展，越来越多的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 效果图