小程序抽象节点案例

{
  "component": true,
  "componentGenerics": {
    "mp-swipe-card-item": "true"
  }
}

 

每个项目产品都会让你加埋点，你是愿意花几天一个个加，还是愿意几分钟一个小时加完去喝茶聊天？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

<view 
  id="mp-swipe-card"
  class="mp-swipe-card-container"
  bind:touchmove="handleTouchMove"
  bind:touchstart="handleTouchStart"
  bind:touchcancel="handleTouchEnd"
  bind:touchend="handleTouchEnd"
>
  <view 
    wx:for="{{list}}" 
    wx:for-index="idx"
    wx:key="item.id"
    wx:if="{{list.length - idx < 4}}"
    class="mp-swipe-card-item {{list.length - 1 === idx ? 'top' : ''}}"
    style="transform: translate3d({{list.length - 1 === idx ? position.x : 0 }}rpx, 0rpx, 0rpx);"
  >
    <mp-swipe-card-item
      item-data="{{item}}"
    ></mp-swipe-card-item>
  </view>
</view>

上面是父类写法

子类item就不说了

page写法

{
  "usingComponents": {
    "mp-swipe-card": "../../components/mp-swipe-card/index",
    "card-item": "./components/card-item/index"
  }
}

<view class="container">
  <view class="swipe-card-container">
    <view class="placeholder-0"></view>
    <view class="placeholder-1"></view>
    <view class="placeholder-2"></view>
    <mp-swipe-card
      bind:click="handleClickCard"
      push-list="{{pushList}}"
      bind:swipeout="handleSwipeOut"
      generic:mp-swipe-card-item="card-item"   
    >
      <!-- <view>{{item}}</view>   -->
    </mp-swipe-card>
  </view>
</view>

generic:mp-swipe-card-item:这样就可以让父类引用子类方法了