小程序购物车功能（支持手动输入数量）以及侧边栏和列表栏联动的实现

本文链接：https://blog.youkuaiyun.com/dongguan_123/article/details/82705824

本文详细介绍了在小程序项目中实现购物车功能，包括计数器组件、手动输入数量功能以及商品选择组件的设计。同时，还讨论了购物车与列表栏的联动效果，特别是当数据结构为三层嵌套数组时如何进行复杂的数据查找和更新操作。

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

小组刚完成一个小程序项目，第一版正式发布了，过程中也遇到了很多问题，这里记录一下我负责的模块中的购物车功能的实现过程。后期再把其他小伙伴的模块也一并贴上来分析一下，自己也学习一下他们的独门技能！效果图如下：

在这里，计数器、购物篮做成组件用于复用，由于左右联动的功能在另一个模块也有用到，所以就把这个功能也做成了一个组件，传入不通的数据即可，左右联动的实现方法在之前一片博客有写到

https://blog.youkuaiyun.com/dongguan_123/article/details/80598107

这篇博客主要讲一下选择商品的功能，以及支持手动输入的功能实现

数量选择器

结构上采用左、中、右结构，加减号分别绑定两个事件，中间输入框绑定获取焦点、失去焦点和change事件，用于支持手动输入数量

<view class="wrapper">
    <view class="num-choose {
  {totalNum || change ? 'active': ''}}">
        <view class="minus {
  {totalNum || change ? 'active': ''}}" catchtap="minusHandle"             
          data-goodsId="{
  {goodsId}}">
            <tty-icon type="control-reduce"></tty-icon>
        </view>
        <view class="task task-left"></view>
        <input class="num" wx:if="{
  {totalNum || change}}" type="number" maxlength="4" 
          bindinput="changeNum"
         value="{
  {totalNum}}" bindfocus="focusNum" bindblur="blurNum" data-goodsId="
           {
  {goodsId}}"></input>
            <view class="task task-right"></view>
        <view class="plus" catchtap="plusHandle" data-goodsId="{
  {goodsId}}">
            <tty-icon type="control-community"></tty-icon>
        </view>
    </view>
</view>

作为组件，事件必须传导到最上层，在那里对数据进行处理

methods: {
    plusHandle(e) { // 增加事件
      let {totalNum, typeOneIndex, typeTwoIndex, goodsIndex, totalStock} = this.data
      let goodsId = e.currentTarget.dataset.goodsid;
      // let pageX = e.touch