问题描述

如何实现一个商品加购物车的导航？

我们日常当中越来越多的小程序需要用到选择购买商品，并将商品加入购物车的导航过程，那么如何实现这个过程呢？

解决方案

1）json代码

"van-goods-action":  "path/to/@vant/weapp/dist/goods-action/index",

   "van-goods-action-icon": "path/to/@vant/weapp/dist/goods-action-icon/index",

   "van-goods-action-button":  "path/to/@vant/weapp/dist/goods-action-button/index"

 （2）wxml代码

<van-goods-action>

   <van-goods-action-icon

     icon="chat-o"

     text="客服"

     bind:click="onClickIcon"

   />

   <van-goods-action-icon

     icon="cart-o"

     text="购物车"

     bind:click="onClickIcon"

   />

   <van-goods-action-button

     text="加入购物车"

     type="warning"

     bind:click="onClickButton"

   />

   <van-goods-action-button

     text="立即购买"

     bind:click="onClickButton"

   />

</van-goods-action>

（3）js代码

Page({

   onClickIcon() {

     Toast('点击图标');

   },

 

   onClickButton() {

     Toast('点击按钮');

  }

});

购物车在日常使用中非常普遍，小程序掌握其开发方法十分有用。

END

       

微信小程序|配置商品导航_微信