原理:如果是普通页面的上拉触底事件可用小程序提供的:onReachBottom函数;
但现在是tab页,每个页面要独立进行滚动加载,这里用到了scroll-view的bindscrolltolower函数;
注意:有些童鞋自己写完之后bindscrolltolower不起作用,要注意几个点:scroll-view的高度设置没有设置,或者直接设置成100%,没有设置scroll-y="true"。
我这里也设置了100%就有效呢?因为我在它的父元素已经给了一定的高度,它在父元素里面100%才有效,而且滚动的时候也不会覆盖tab标签页头。也可以把高度设置成固定值:600px这种的,看个人需要。
效果图:
上代码:
<!-- 标签页 -->
<view class="tabs">
<view class="tabs-item {
{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">收入+9300</view>
<view class="tabs-item {
{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">支出-0</view>
</view>
<view class="tab-content">
<!-- 收入 -->
<scroll-view scroll-y="true" bindscrolltolower="loadIncome" class="tab-list-content {
{currentTab==0?'active':''}}">
<view class="tab-list-item" wx:for="{
{inList}}">
<view class="tab-list-item-detail">
<text>{
{item.style}}</text>
<text