用vant-weapp写一个购物车

最新推荐文章于 2025-03-04 17:06:42 发布
最新推荐文章于 2025-03-04 17:06:42 发布
阅读量3.5k 收藏 26
点赞数 4
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15128123/article/details/104008142
版权
本文介绍了如何使用 vant-weapp 组件库在微信小程序中构建购物车功能，包括商品卡片、步进器、提交订单栏、滑动单元格和复选框组件的引入及样式调整，详细讲解了遇到的问题及解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vant-weapp介绍

vant-weapp是有赞出品的，前端组件库，既然出自有赞之手，必然是尤其适合于做一个商城项目，它移植于vant-ui，后者有的特性大部分都已经实现。vant-ui找了好久，都没有发现购物车业务组件，我就从自家的有赞精选这个小程序的购物车搬一份过来。

参考目标页

有赞购物车

官方文档

https://youzan.github.io/vant-weapp

安装

npm i @vant/weapp -S --production

编译

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

image.png

引入各组件

1.Card 商品卡片组件

最低0.47元/天 解锁文章
黄秀杰
关注
[学习笔记]利用vant组件实现商城购物车功能
iufesjgc的博客
10-07 4849
效果图： 商品相关数据大致结构： shopcard:[{ num:1, price:'1999', title:'商品名商品名商品名商品商品名', desc:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', thumb:'图片地址' }, ...
微信小程序使用 Vant Weapp 组件库教程
最新发布
平凡的世界
04-01 2097
以上步骤涵盖了 Vant Weapp 的安装、配置和使用。如需更详细的示例或特定组件的用法，可查阅官方文档或参考相关教程。在项目根目录下运行以下命令，生成。文件夹，包含 Vant 组件。构建成功后，项目目录下会生成。正确指向小程序目录（如。
Vue前端开发- Vant之Card组件
03-04 605
业务组件是Vant的一大特点，特别是针对移动端商城开发的业务，有许多组件可以直接运用到通用商城的开发中，代码也十分简单，大大加快了应用的开发速度。在众多的业务组件中，Card 卡片、Coupon 优惠券选择器和SubmitBar 提交订单栏是三款常用的业务组件，接下来结合实例，分别演示它们使用的过程。
小程序 + vant 购物车爬坑
没有翅膀的我们，只是随便认为不能飞而已
12-06 1410
案例页面 cart 是主页面， cart-item 是template 案例实现 单个商品的选择，删除，每个产品数量的增减，全选按钮的与单选按钮的关联。价格的实时更新；产品item抽离一个template。 注意点 1.点击事件绑定参数，跟vue react都不一样 ； 2.绑定参数 data-xxx ; event对象 3.小程序template 只做页面布局，跟组件不一样。小程序tem...
Vant+小程序+购物车实例
weixin_30587025的博客
08-11 2309
图片实例，看是否是您所需要的喔。。。。 扫码小程序可看实例操作，有啥问题也可扫码加群，很希望可以帮助到你喔！ HTML部分： <view class="cart"> <view class='top' wx:if="{{isTop}}"> <view> <...
记录代码（购物车相关）小程序 vantweapp
zhoulib__的博客
07-17 603
import { request } from "../../../request/index"; import Dialog from '../../../miniprogram_npm/@vant/weapp/dialog/dialog'; // pages/my/ShoppingCart/ShoppingCart.js Page({ /** * 页面的初始数据 */ data: { disabled:false, result: [], checked:f
card如何添加复选框 vant_用vant-weapp写一个购物车
weixin_39861882的博客
12-23 1441
vant-weapp介绍vant-weapp是有赞出品的，前端组件库，既然出自有赞之手，必然是尤其适合于做一个商城项目，它移植于vant-ui，后者有的特性大部分都已经实现。vant-ui找了好久，都没有发现购物车业务组件，我就从自家的有赞精选这个小程序的购物车搬一份过来。参考目标页官方文档安装npm i @vant/weapp -S --production编译打开微信开发者工具，点击 工具 -...
card如何添加复选框 vant_vue+vant-UI框架实现购物车的复选框全选和反选功能
weixin_29002935的博客
02-15 917
购物车页面的设计图商品的列表代码：v-for="(item,index) in shoppingListData.rows":key="index">:value="item.goods_id"v-model="item.isChecked"checked-color="#07c160"@click="chooseChange(item.goods_id)">:src="item.go...
Hbuilder uni-app项目使用Vant Weapp
m0_53926669的博客
01-09 2328
Hbuilder uni-app项目使用Vant Weapp 1.在项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。 直接通过 git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。 git clone https://github.com/youzan/vant-weapp.git 2修改文件名如下 3.page.json中引入 "pages": [{ "p
小程序引入第三方组件库Vant Weapp
weixin_47426557的博客
08-19 1609
最近在看小程序中引入第三方组件相关知识，在引入过程中一直出现各种问题和报错最终终于成功暗中使用；以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因。 vant-weapp中文文档：https://youzan.github.io/vant-weapp/ 1、打开微信开发者工具，选择目录 > 输入APPID > 确定 2、在文件根目录下右键 (一定要是根目录) > 选择在内建终端中打开 一定要是根目录，如果不是根目录可以使用cd进行切换 cd ../ 切换...
vant实现购物车功能
12-28
做一些电商或者支付页面，肯定少不了购物车功能，一方面正反选，另一方面动态价格，全选之后再去加减商品数量（这里必须考虑 里面有很多蛋疼的问题）猛的一想，感觉思路很清晰，但是，真正动起手来就各种bug出来了，说实话 搞这个购物车，浪费我整整一下午的时间，当我回过头捋一遍，其实，半小时就能完事。就是因为全选的时候 我又去更改商品数量，然后调用算价格的方法导致浪费了太多时间，话不多少，还是先上图吧  先看看需求文档吧 代码格式不是很整齐 编辑器没有调整  凑合看吧 <van-nav-bar title='\u8d2d\u7269\u8f66' left
微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)
07-08
微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)
微信小程序之购物车功能
12-11
前言 以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 需求 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时，页面会变为空购物车的布局 根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id) 然后
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue 购物车（vant）
Huang_DW的博客
07-24 1177
<template> <div> <!-- vant导航 --> <van-nav-bar title="购物车"> <template #left> <van-icon @click="back" name="arrow-left" color="#6F717A" size="20px"/> </template> <template #right> &
vue+vant中购物车页面
weixin_52568554的博客
08-14 1396
vue+vant移动端购物
vant weapp 实现点击购物车 弹出下拉菜单 展示商品列表 可更改数量 和删除商品
12-12
要实现点击购物车弹出下拉菜单并展示商品列表，同时可以更改数量和删除商品的功能，可以使用Vant Weapp组件库。以下是一个简单的实现步骤： ### 1. 安装Vant Weapp 首先，确保你已经安装了Vant Weapp。如果还没有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值