我在做一个商城首页，有一个tapBar组件切换3中类型的商品，有一个商城列表组件根据点击不同类型渲染不同类型的商品，给页面添加触底事件，当滑动到底部时继续发送请求获取更多当前类型数据。

现在出现个问题，当我在 流行 类型触底了3次时，商品增加，页面高度变高，此时滚动条没触底，我再切换到 新款 类型时，会自动执行触底事件，获取与 流行 类型相同的商品数量，为什么会自动执行触底事件？我只想根据类型切换不同商品而已。

//wxml
<view class="home">
  <x-tap-control class="tab-control"
                 bind:tabclick="tabclick" 
                 titles="{{titles}}" />
  <x-goods-list goodsList="{{goods[currentType].list}}" />
</view>

//js
// pages/home/home.js
import {
  getMultiData,
  getProduct
} from '../../server/home.js';//api

const POP = "pop";
const SELL = "sell";
const NEW = "new";

Page({
  data: {
    titles: ["流行", "新款", "精选"],
    goods: {
      [POP]: {
        page: 1,
        list: []
      },
      [NEW]: {
        page: 1,
        list: []
      },/*  */
      [SELL]: {
        page: 1,
        list: []
      }
    },
    currentType: POP,
  },

  onLoad: function(options) {
      this._getProductData(POP);
      this._getProductData(NEW);
      this._getProductData(SELL);
  },

  //切换类型
  tabclick(e) {
    let currentType = ''
    switch (e.detail.index) {
      case 0:
        currentType = POP
        break
      case 1:
        currentType = NEW
        break
      case 2:
        currentType = SELL
        break
    }
    this.setData({
      currentType
    })
  },

  //获取商品
  _getProductData(type) {
    const page = this.data.goods[type].page;
    console.log('type:', type, 'page:', page)
    getProduct({
      type: this.data.currentType,
      page: this.data.goods[this.data.currentType].page
    }).then((res) => {
      const list = res.data.list;
      let goods = this.data.goods;
      goods[type].list.push(...list);
      goods[type].page += 1;
      this.setData({
        goods
      })
    })
  },

  //页面上拉触底事件的处理函数
  onReachBottom: function () {
    this._getProductData(this.data.currentType);
    console.log(this.data.currentType, '触底了')
  },