小程序实现tab标签页，并且每个标签页独立实现加载更多（上拉触底）

最新推荐文章于 2023-09-21 21:23:13 发布

草鞋船

最新推荐文章于 2023-09-21 21:23:13 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_44558497/article/details/105193721

原理：如果是普通页面的上拉触底事件可用小程序提供的：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 class="tab-list-item-after">{
  
  {item.coin}}</text>