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

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

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

https://blog.csdn.net/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