我在做一个商城首页,有一个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, '触底了')
},
我也是碰到整个问题,请问你怎么解决了呢?求助下