小程序实现tab标签页,并且每个标签页独立实现加载更多(上拉触底)

原理:如果是普通页面的上拉触底事件可用小程序提供的: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 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值