微信小程序实现一个购物车页面的简易列表效果

article/2025/10/23 8:47:08

 本文只是简单的模仿天猫APP的购物车列表的样式效果，并实现了部分事件功能，功能并不完善，请降低期待观看。

 

天猫APP的购物车效果：

天猫效果图

 小程序模仿的实现效果：

wxml部分的代码：

<view wx:if="{{!isCartEmpty}}"><view class="cart-item" wx:for="{{cartList}}" wx:key="{{item.merchantInfo.merchantId}}"><!-- 商家部分布局 --><view class="item-box item-merchant"><view class="cart-check-box"><icon class="cart-item-redio" wx:if="{{item.merchantInfo.hasSelected}}" type="success" color="red" data-merchant-id="{{item.merchantInfo.merchantId}}" bind:tap="selectGoodsGroup" /><icon class="cart-item-redio" wx:else type="circle" color="gray" data-merchant-id="{{item.merchantInfo.merchantId}}" bind:tap="selectGoodsGroup" /></view><view class="merchant-info"><view bind:tap="goToStoreHome"><image src="http://n1.itc.cn/img8/wb/smccloud/recom/2015/05/29/143288664727843841.jpeg" mode="aspectFill" /><text style="font-size: 37rpx;color:#424242; font-weight:bold;">{{item.merchantInfo.name}}<text class="angle"/></text></view><text style="margin-right:25rpx;font-size:30rpx;" wx:if="{{item.merchantInfo.isActivity}}">领券</text></view></view><!-- 商品列表部分布局 --><view class="item-box item-goods" wx:for="{{item.goodsList}}" wx:for-item="goods" wx:key="{{goods.id}}"><view class="cart-check-box"><icon class="cart-item-redio" wx:if="{{goods.hasSelected}}" type="success" color="red" data-merchant-id="{{goods.merchantId}}" data-goods-id="{{goods.id}}" bind:tap="selectGoodsSingle" /><icon class="cart-item-redio" wx:else type="circle" color="gray" data-merchant-id="{{goods.merchantId}}" data-goods-id="{{goods.id}}" bind:tap="selectGoodsSingle" /></view><view class="goods-info"><view><image src="http://img14.360buyimg.com/n1/jfs/t20386/340/2137984030/165902/9dcb0893/5b45c9feN76c521a9.jpg" style="width:200rpx;height:200rpx;border-radius:10rpx;" mode="widthFix"></image></view><!-- 商品信息部分布局 --><view class="goods-info-details"><view><view style="font-size:30rpx;color:#3C3C3C;">{{goods.title}}</view><view style="margin-top:10rpx;"><text class="goods-desc">静音自动摇头上下<text class="down"/></text></view></view><!-- 商品价格、数量布局 --><view class="goods-price-quantity"><view><text>￥{{goods.price}}</text></view><view class="goods-quantity-switch-box"><view class="goods-quantity-show" bind:tap="showUpdateQuantityDialog" wx:if="{{goods.quantityUpdatable}}"><view class="goods-quantity-boder goods-quantity-update"><text class="quantity-minus-box" bindtap="minus" data-merchant-id="{{goods.merchantId}}" data-goods-id="{{goods.id}}" >-</text><text class="quantity_update-box">{{goods.quantity}}</text><text class="quantity-pluse-box" bindtap="pluse" data-merchant-id="{{goods.merchantId}}" data-goods-id="{{goods.id}}" >+</text></view><icon style="margin-left:10rpx;" type="cancel" color="red" data-merchant-id="{{goods.merchantId}}" data-goods-id="{{goods.id}}" bind:tap="hideUpdateQuantity" /></view><text wx:else class="goods-quantity-boder goods-quantity" bind:tap="showUpdateQuantity" data-merchant-id="{{goods.merchantId}}" data-goods-id="{{goods.id}}">×{{goods.quantity}}</text></view></view></view></view></view></view><view style="height:120rpx"></view><view class="cart-footer"><view style="height:1rpx;background-color:#f5f5f5"></view><view class="cart-footer-box"><view><icon wx:if="{{hasAllSelected}}" type="success" color="red" class="total-select" bindtap="selectAll" /><icon wx:else type="circle" color="gray" class="total-select" bindtap="selectAll" /></view><view><text class="total-text">合计:<text class="cart-toatl-price">￥{{totalPrice}}</text></text><text class="settlement-text" bind:tap="goToOrderSubmit">结算</text></view></view></view></view><block wx:else><view class="catnone"><image src="../../assets/images/cart_none_a.png" mode="widthFix"></image><view class="catnone-text">您的购物车还是空的，快去买买买吧!</view></view><view class="cart-recommend"><block wx:for="{{recommends}}" wx:key="index"><view class="recommend-item"><image class="item-img" src="{{item.image}}" mode="widthFix"></image><view class="item-text">{{item.text}}</view><view class="item-price">{{item.price}}</view></view></block></view>
</block>

 wxss部分代码：

/* pages/shoppingcart/shoppingcart.wxss */
.title_edit {margin-left: 20rpx;float: left;position: absolute;left: 0px;
}.title {width: 100%;height: 88rpx;display: flex;align-items: center;justify-content: center;border-bottom: 2rpx solid gray;
}.catnone {text-align: center;padding-top: 20rpx;
}.catnone image {display: block;margin: auto;
}.catnone-text {margin-top: 20rpx;color: lightgrey;
}.cart-recommend {width: 100%;display: flex;margin-top: 40rpx;justify-content: space-evenly;}.item-img {width: 200rpx;height: 200rpx;
}.cart-footer {position: fixed;bottom: 0;left: 0;width: 100%;height: 110rpx;line-height: 90rpx;box-sizing: border-box;
}.cart-footer-box {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;box-sizing: border-box;background-color: #fff;
}.settlement-text {border-radius: 85rpx;background-color: #f40;font-size: 35rpx;text-align: center;margin-left: 15rpx;margin-right: 15rpx;padding-top: 20rpx;padding-bottom: 20rpx;padding-right: 55rpx;padding-left: 55rpx;color: #fff;
}.cart-toatl-price {height: 100%;font-size: 30rpx;color: #f40;
}.total-text {height: 100%;font-size: 33rpx;color: #333;
}.total-select {position: absolute;left: 20rpx;top: 25rpx;width: 45rpx;height: 45rpx;
}.container {display: flex;flex-direction: column;
}.cart-item {margin-left: 15rpx;margin-right: 15rpx;background-color: #fff;border-radius: 10px;box-shadow: 0px 0px 3px 0px rgba(183, 183, 183, 0.8);box-sizing: border-box;margin-top: 25rpx;padding-bottom: 25rpx;
}.cart-item-redio {margin-left: 20rpx;margin-right: 20rpx;align-self: center;width: 45rpx;height: 45rpx;
}.check-box {position: relative;z-index: 1;float: left;width: 45rpx;height: 45rpx;background-position: 0 0;line-height: 200em;overflow: hidden;cursor: pointer;
}.item-box {display: flex;padding-left: 15rpx;align-items: center;
}.item-merchant {line-height: 80rpx;
}.merchant-info {display: flex;justify-content: space-between;align-items: center;height: 100%;width: 100%;
}.merchant-info view {display: flex;align-items: center;
}.merchant-info image {margin-left: 15rpx;width: 55rpx;height: 55rpx;border-radius: 10rpx
}.merchant-info text {font-size: 35rpx;color: #333;margin-left: 25rpx;
}.cart-check-box {display: flex;/* opacity: 0.5; *//* 透明度 */
}.cart-check-box .cart-pro-select {justify-content: center;align-content: center;
}.item-goods {margin-top: 30rpx;height: 200rpx;
}.goods-info {display: flex;height: 200rpx;width: 100%;align-items: center;
}.goods-info-details {display: flex;flex-direction: column;height: 100%;width: 100%;margin-right: 20rpx;margin-left: 20rpx;justify-content: space-between;
}.goods-desc {font-size: 27rpx;padding-right: 17rpx;padding-left: 17rpx;padding-top: 12rpx;padding-bottom: 12rpx;background-color: #f5f5f5;color: #666;border-radius: 15rpx
}.goods-quantity-box {display: flex;align-content: space-around;border-width: 1rpx;border-style: solid;color: #e5e5e5;
}.goods-price-quantity {display: flex;justify-content: space-between;/* align-items: flex-end; */
}.goods-quantity-switch-box {display: flex;justify-content: flex-end;
}.goods-quantity-boder {border-radius: 17rpx;border-width: 1rpx;border-style: solid;border-color: #e5e5e5;
}.goods-quantity {/* position: absolute; */font-size: 27rpx;padding-right: 12rpx;padding-left: 12rpx;padding-top: 8rpx;padding-bottom: 8rpx;text-align: center;
}.goods-quantity-show {display: flex;align-items: center;position: absolute;
}.goods-quantity-update {display: flex;align-items: center;width: 160rpx;justify-content: space-around;
}.quantity-minus-box {padding-right: 12rpx;padding-left: 12rpx;text-align: center;
}.quantity_update-box {border-right: 1rpx solid #e5e5e5;border-left: 1rpx solid #e5e5e5;font-size: 27rpx;text-align: center;flex-grow: 1.7;
}.quantity-pluse-box {padding-right: 12rpx;padding-left: 12rpx;text-align: center;
}.angle {display: inline-block;transform: rotate(45deg);height: 18rpx;width: 18rpx;border-width: 1rpx 1rpx 0 0;border-style: solid;margin-left: 0.1em;
}.down {display: inline-block;transform: rotate(135deg);height: 12rpx;width: 12rpx;border-width: 3rpx 3rpx 0 0;border-style: solid;align-self: flex-start;position: relative;margin-left: 0.4em;margin-bottom: 8rpx;
}.cart-list {position: relative;padding: 20rpx 20rpx 20rpx 285rpx;height: 185rpx;border-bottom: 1rpx solid #e9e9e9;
}

 js部分代码：

// pages/shoppingcart/shoppingcart.js
const app = getApp()
Page({/*** 页面的初始数据*/data: {statusBarHeight: app.globalData.statusBarHeight,isCartEmpty: false, // 购物车是否有商品hasAllSelected: false, // 是否全选cartList: [{merchantInfo: {merchantId: "111",name: "这是我家的小小小店",icon: '/assets/images/cart_none_a.png',hasSelected: false,isActivity: true},goodsList: [{id: 1111,merchantId: "111",title: '格力迷你静音台式电风扇',image: '/assets/images/cart_none_a.png',quantity: 4,price: 100,quantityUpdatable: false,hasSelected: false}]},{"merchantInfo": {"merchantId": "222","name": "这是我家的小小小店","icon": '/assets/images/cart_none_a.png',"hasSelected": false,"quantityUpdatable": false,"isActivity": false},"goodsList": [{"id": 2221,"merchantId": "222","title": '格力迷你静音台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 4,"price": 130,"quantityUpdatable": false,"hasSelected": false},{"id": 22222,"merchantId": "222","title": '格力家用台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 1,"price": 320,"quantityUpdatable": false,"hasSelected": false}]},{"merchantInfo": {"merchantId": "333","name": "这是我家的小小小店","icon": '/assets/images/cart_none_a.png',"hasSelected": false,"isActivity": true},"goodsList": [{"id": 3331,"merchantId": "333","title": '格力迷你静音台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 4,"price": 110,"quantityUpdatable": false,"hasSelected": false},{"id": 3332,"merchantId": "333","title": '格力家用台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 1,"price": 310,"quantityUpdatable": false,"hasSelected": false},{"id": 3333,"merchantId": "333","title": '格力迷你静音台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 4,"price": 120,"quantityUpdatable": false,"hasSelected": false}]},{"merchantInfo": {"merchantId": "444","name": "这是我家的小小小店","icon": '/assets/images/cart_none_a.png',"hasSelected": false,"isActivity": false},"goodsList": [{"id": 4441,"merchantId": "444","title": '格力迷你静音台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 4,"price": 130,"quantityUpdatable": false,"hasSelected": false},{"id": 4442,"merchantId": "444","title": '格力家用台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 1,"price": 290,"quantityUpdatable": false,"hasSelected": false},{"id": 4443,"merchantId": "444","title": '格力迷你静音台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 4,"price": 150,"quantityUpdatable": false,"hasSelected": false},{"id": 4444,"merchantId": "444","title": '格力家用台式电风扇',"image": '/assets/images/cart_none_a.png',"quantity": 1,"price": 280,"quantityUpdatable": false,"hasSelected": false}]}],totalPrice: 0,recommends: [{image: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1281982941,672088714&fm=26&gp=0.jpg",text: "哈哈哈哈哈",price: "¥59.99"},{image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593543702366&di=6e0d404920b3480730ffa7841d1a3e31&imgtype=0&src=http%3A%2F%2Fwww.szthks.com%2Flocalimg%2F687474703a2f2f6777312e616c6963646e2e636f6d2f62616f2f75706c6f616465642f69382f5431504858625843786958585858585858585f2121302d6974656d5f7069632e6a7067.jpg",text: "呵呵呵呵",price: "¥10.99"},{image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593544013692&di=82cbdcbb7ba6b5e29edbe930d828b6cb&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1156539113%2C3136930104%26fm%3D214%26gp%3D0.jpg",text: "嘿嘿嘿",price: "¥88.88"}]},/*** 由商家列表项选择商品组事件*/selectGoodsGroup(e) {console.log(e);let cartList = this.data.cartList;const merchantId = e.currentTarget.dataset.merchantId;cartList.forEach(function (item) {if (item.merchantInfo.merchantId === merchantId) {const hasSelected = item.merchantInfo.hasSelected;item.merchantInfo.hasSelected = !hasSelected;item.goodsList.forEach(function (goods) {goods.hasSelected = item.merchantInfo.hasSelected;})return;};})this.setData({cartList: cartList,})this.calculateTotalPrice();this.verifyHasAllSelected();},/*** 计算商品总价格事件*/calculateTotalPrice() {let cartList = this.data.cartList;let totalPrice = 0;cartList.forEach(function (item) {item.goodsList.forEach(function (goods) {// console.log(goods);if (goods.hasSelected) {totalPrice += goods.price * goods.quantity;}// console.log(totalPrice);})})this.setData({totalPrice: totalPrice})},/*** 验证是否全选事件*/verifyHasAllSelected() {let hasAllSelected = true;let cartList = this.data.cartList;cartList.forEach(function (item) {if (!item.merchantInfo.hasSelected) {hasAllSelected = false;return;}item.goodsList.forEach(function (goods) {if (!goods.hasSelected) {hasAllSelected = false;return;}})})console.log(hasAllSelected);this.setData({hasAllSelected: hasAllSelected,})},/*** 单个商品选择事件*/selectGoodsSingle(e) {console.log(e);let cartList = this.data.cartList;const merchantId = e.currentTarget.dataset.merchantId;const goodsId = e.currentTarget.dataset.goodsId;cartList.forEach(function (item) {if (item.merchantInfo.merchantId === merchantId) {item.goodsList.forEach(function (goods) {if (goods.id === goodsId) {const hasSelected = goods.hasSelected;goods.hasSelected = !hasSelected;return;}})return;}});this.setData({cartList: cartList,})this.calculateTotalPrice();this.verifyHasAllSelected();},/*** 商品数量减1事件*/minus(e) {console.log(e);let cartList = this.data.cartList;const merchantId = e.currentTarget.dataset.merchantId;const goodsId = e.currentTarget.dataset.goodsId;let hasSelected;cartList.forEach(function (item) {if (item.merchantInfo.merchantId === merchantId) {item.goodsList.forEach(function (goods) {if (goods.id === goodsId) {if (goods.quantity <= 1) {wx.showToast({title: '商品数量少于1',})} else {goods.quantity -= 1;}hasSelected = goods.hasSelected;return;}})return;}});this.setData({cartList: cartList,})if (hasSelected) {this.calculateTotalPrice();}},/*** 商品数量加1事件*/pluse(e) {console.log(e);let cartList = this.data.cartList;const merchantId = e.currentTarget.dataset.merchantId;const goodsId = e.currentTarget.dataset.goodsId;let hasSelected;cartList.forEach(function (item) {if (item.merchantInfo.merchantId === merchantId) {item.goodsList.forEach(function (goods) {if (goods.id === goodsId) {if (goods.quantity >= 10) {wx.showToast({title: '数量超过10',})} else {goods.quantity += 1;}hasSelected = goods.hasSelected;return;}})return;}});this.setData({cartList: cartList,})if (hasSelected) {this.calculateTotalPrice();}},/*** 购物车全选事件*/selectAll(e) {let hasAllSelected = this.data.hasAllSelected;hasAllSelected = !hasAllSelected;let cartList = this.data.cartList;for (let i = 0; i < cartList.length; i++) {let item = cartList[i];item.hasSelected = hasAllSelected;item.merchantInfo.hasSelected = hasAllSelected;let goodsList = item.goodsList;for (let i = 0; i < goodsList.length; i++) {let goodsItem = goodsList[i];goodsItem.hasSelected = hasAllSelected;}}this.setData({hasAllSelected: hasAllSelected,cartList: cartList});this.calculateTotalPrice();},/*** 显示修改单个商品数量布局事件*/showUpdateQuantity(e) {console.log(e);const merchantId = e.currentTarget.dataset.merchantId;const goodsId = e.currentTarget.dataset.goodsId;this.showOrHideUpdateQuantity(merchantId, goodsId, true);},/*** 隐藏修改单个商品数量事件 */hideUpdateQuantity(e) {console.log(e);const merchantId = e.currentTarget.dataset.merchantId;const goodsId = e.currentTarget.dataset.goodsId;this.showOrHideUpdateQuantity(merchantId, goodsId, false);},/*** 显示改商品数量对话框事件*/showUpdateQuantityDialog() {},/*** 显示或者隐藏修改商品数量布局事件*/showOrHideUpdateQuantity(merchantId, goodsId, quantityUpdatable) {let cartList = this.data.cartList;console.log(merchantId);cartList.forEach(function (item) {if (item.merchantInfo.merchantId === merchantId) {item.goodsList.forEach(function (goods) {if (goods.id === goodsId) {goods.quantityUpdatable = quantityUpdatable;return;}})return;}});this.setData({cartList: cartList,})}})

由于作者水平有限，语言描述及代码实现中难免有纰漏，望各位看官多提宝贵意见！

Hello , World !

感谢所有！


http://chatgpt.dhexx.cn/article/7kYC3wRE.shtml

相关文章

【Python之pymysql库学习】一、分析fetchone()、fetchmany()、fetchall()（保姆级图文+实现代码）

【Python之pymysql库学习】一、分析fetchone()、fetchmany()、fetchall()（保姆级图文+实现代码）

目录 实现效果实现思路实现代码总结 欢迎关注 『Python之pymysql库学习』 系列&#xff0c;持续更新中 欢迎关注 『Python之pymysql库学习』 系列&#xff0c;持续更新中 实现效果 实现思路 其实有半数代码是创建数据库和创建数据表并插入数据这些环境配置部分我都写好了&…
阅读更多...
fetchone、fetchall

fetchone、fetchall

fetchone(): 该方法获取下一个查询结果集。结果集是一个对象,读取一行结果&#xff0c;读取完指向下一行&#xff0c;到空为止 fetchall():接收全部的返回结果行&#xff0c;到空为止 fetchone() &#xff1a; 返回单个的元组&#xff0c;也就是一条记录(row)&#xff0c;如果没…
阅读更多...
python fetchall方法_Python连接MySQL并使用fetchall()方法过滤特殊字符

python fetchall方法_Python连接MySQL并使用fetchall()方法过滤特殊字符

python3.3从mysql里取出的数据莫名其妙有括号和逗号每天跟自己喜欢的人一起&#xff0c;通电话&#xff0c;旅行&#xff0c;重复一个承诺和梦想&#xff0c;听他第二十八次提起童年往事&#xff0c;每年的同一天和他庆祝生日&#xff0c;每年的情人节圣诞节除夕&#xff0c;也…
阅读更多...
pdo fetchAll

pdo fetchAll

作用 fetchAll()方法是获取结果集中的所有行.其返回值是一个包含结果集中所有数据的二维数组。 PDOStatement::fetchAll ([ int $fetch_style [, mixed $fetch_argument[, array$ctor_args array() ]]] ) fetch_style:控制结果的返回方式 PDO::FETCH_ASSOC 关联数组形式 PD…
阅读更多...
记录一个常用函数fetchall()的使用过程

记录一个常用函数fetchall()的使用过程

fetchall() 作用是返回多个元组&#xff0c;即对应数据库里的多条数据概念&#xff1b; 常见用法是 cursor.execute(‘select * from table’) value cursor.fetchall() 此时&#xff0c;print(value)则会输出以下二维元组&#xff0c;如下图 拓展&#xff1a; 同类函数fet…
阅读更多...
Python从Oracle数据库中获取数据——fetchall(),fetchone(),fetchmany()函数功能分析

Python从Oracle数据库中获取数据——fetchall(),fetchone(),fetchmany()函数功能分析

Python从Oracle数据库中获取数据——fetchall(),fetchone(),fetchmany()函数功能分析 一、fetchall()&#xff0c;fetchone()&#xff0c;fetchmany()简单介绍 1、fetchall()函数,它的返回值是多个元组,即返回多个行记录,如果没有结果,返回的是() 2、fetchone()函数,它的返回…
阅读更多...
KITTI数据集可视化（一）：点云多种视图的可视化实现

KITTI数据集可视化（一）：点云多种视图的可视化实现

如有错误&#xff0c;恳请指出。 在本地上&#xff0c;可以安装一些软件&#xff0c;比如&#xff1a;Meshlab&#xff0c;CloudCompare等3D查看工具来对点云进行可视化。而这篇博客是将介绍一些代码工具将KITTI数据集进行可视化操作&#xff0c;包括点云鸟瞰图&#xff0c;FOV…
阅读更多...
KITTI数据集的点云格式转PCD格式

KITTI数据集的点云格式转PCD格式

参考文章&#xff1a;https://blog.csdn.net/xinguihu/article/details/78922005 KITTI数据集应该不用多做介绍了&#xff0c;基本上做自动驾驶的都知道这个东西。最近本人用到这个数据集想看看里面的点云长什么模样&#xff0c;却发现有点别扭&#xff0c;没有直接可以看的工…
阅读更多...
使用kitti数据集实现自动驾驶——发布照片、点云、IMU、GPS、显示2D和3D侦测框

使用kitti数据集实现自动驾驶——发布照片、点云、IMU、GPS、显示2D和3D侦测框

本次内容主要是使用kitti数据集来可视化kitti车上一些传感器&#xff08;相机、激光雷达、IMU&#xff09;采集的资料以及对行人和车辆进行检测并在图像中画出行人和车辆的2D框、在点云中画出行人和车辆的3D框。 首先先看看最终实现的效果&#xff1a; 自动驾驶视频 看了上面的…
阅读更多...
KITTI数据集-label解析笔记

KITTI数据集-label解析笔记

笔记摘自&#xff1a;KITTI数据集--label解析与传感器间坐标转换参数解析_苏源流的博客-CSDN博客 KITTI数据集是自动驾驶领域最知名的数据集之一。 一、kitti数据集&#xff0c;label解析 16个数代表的含义&#xff1a; 第1个字符串&#xff1a;代表目标的类别 Car, Van, Tru…
阅读更多...
16个车辆信息检测数据集收集汇总（简介及链接）

16个车辆信息检测数据集收集汇总（简介及链接）

16个车辆信息检测数据集收集汇总&#xff08;简介及链接) 转载自&#xff1a;https://blog.csdn.net/u014546828/article/details/109089621?utm_mediumdistribute.pc_relevant.none-task-blog-baidujs_baidulandingword-1&spm1001.2101.3001.4242 目录 1. UA-DETRAC …
阅读更多...
双目网络公开数据集的特性

双目网络公开数据集的特性

文章目录 概述SceneFlowKITTI 2012 & 2015ETH3D 2017Middlebury 2014 概述 参考文章&#xff1a;Rethinking Training Strategy in Stereo Matching 主流双目公开数据集有&#xff1a;SceneFlow、KITTI、ETH3D、MB。 各个双目网络主流训练数据视差分布的直方图&#xff1a;…
阅读更多...
KITTI数据集下载及介绍

KITTI数据集下载及介绍

KITTI数据集下载及介绍 KITTI数据集由德国卡尔斯鲁厄理工学院和丰田美国技术研究院联合创办&#xff0c;是目前国际上最大的自动驾驶场景下的计算机视觉算法评测数据集。该数据集用于评测立体图像(stereo)&#xff0c;光流(optical flow)&#xff0c;视觉测距(visual odometry…
阅读更多...
KITTI 数据集--下载链接

KITTI 数据集--下载链接

Visual Odometry / SLAM Evaluation 2012 数据集主页&#xff1a;The KITTI Vision Benchmark Suite (cvlibs.net) 里程计基准由22个立体序列组成&#xff0c;以无损失png格式保存。 11个具有真实轨迹的序列&#xff08;00-10&#xff09;用于训练&#xff0c;11个没有真实…
阅读更多...
KITTI数据集下载及解析

KITTI数据集下载及解析

KITTI数据集下载及解析 W.P. Xiao, Vision group&#xff0c;SHUSV 版本更新时间更新内容作者1V 1.02020.01.09完成主体内容W.P. Xiao2 文章目录 KITTI Dataset1 简介1.1 数据采集平台1.2 坐标系 2 数据解析2.1 image文件2.2 velodyne文件2.3 calib文件2.4 label文件 3 KITTI可…
阅读更多...
无人驾驶之KITTI数据集介绍与应用（一）——数据组织方式介绍

无人驾驶之KITTI数据集介绍与应用（一）——数据组织方式介绍

本系列博客旨在介绍无人驾驶领域中颇负盛名的KITTI公开数据集&#xff0c;首先整体介绍该数据集的由来、数据组织方式、官方开发工具的使用&#xff0c;重点详细介绍其中对于Object、Tracking和raw data的数据使用&#xff0c;主要分享了我在使用这些数据集时开发的一些工具&am…
阅读更多...
waymo数据集总结

waymo数据集总结

参考资料 官网&#xff1a; https://waymo.com/open/data/perception/#lidar-data 文章&#xff1a; https://arxiv.org/pdf/1912.04838.pdf github&#xff1a; https://github.com/waymo-research/waymo-open-dataset colab教程&#xff1a; https://colab.research.google.…
阅读更多...
KITTI数据集介绍

KITTI数据集介绍

目录 1、KITTI数据集概述2、kitti数据采集平台3、Kitti数据集标注格式参考文献&#xff1a; 1、KITTI数据集概述 KITTI数据集由德国卡尔斯鲁厄理工学院和丰田美国技术研究院联合创办&#xff0c;是目前国际上最大的自动驾驶场景下的算法评测数据集。该数据集用于评测立体图像(…
阅读更多...
KITTI 数据集简介

KITTI 数据集简介

数据集简介 KITTI数据集由德国卡尔斯鲁厄理工学院和丰田美国技术研究院联合创办&#xff0c;是目前国际上自动驾驶场景下常用的数据集之一。KITTI数据集的数据采集平台装配有2个灰度摄像机&#xff0c;2个彩色摄像机&#xff0c;一个Velodyne 64线3D激光雷达&#xff0c;4个光…
阅读更多...
KITTI数据集简析

KITTI数据集简析

文章目录 KITTI数据集数据集结构数据集内容data_object_calib 样本标定数据data_object_label_2 3D点云标注文件 KITTI数据集 数据集结构 KITTI数据集网盘 提取码&#xff1a;0bjl KITTI ├── devkit_object | ├── cpp | ├── mapping | ├── matlab | └─…
阅读更多...
推荐文章

Copyright @ 2022~2023