微信小程序的分页加载

本文主要是介绍微信小程序的分页加载，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

思路

利用微信的scroll-view来做成滑动效果

滑动到底部触发方法令pageNum增加去请求新数据，然后拼接到数据列表

实现

为了方便其他页面也用到就弄成组件，以下是dropDown.wxml

<scroll-view class="dropDown" scroll-y style="width: {{width}}rpx; height: {{height}}rpx;background:{{background}};"
  refresher-enabled="{{false}}" refresher-default-style="black" refresher-triggered="{{triggered}}"
  bindrefresherpulling="onPulling" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore"
  bindrefresherabort="onAbort" bindscrolltolower='onLoadmore'>
  <slot name="list"></slot>
</scroll-view>

在页面引用，利用js获取设置高度，并用插槽把list插入到组件中

        <dropDown id="dropDown" height='{{height}}' width='750' data="{{orderList}}" binddropDown="dropDown">
            <view class="orderInfo" wx:for="{{orderList}}" data-item="{{item}}" data-index="{{index}}"
                bindtap="goApplicationInfo" wx:key="index" slot="list">
                <view class="orderInfo-left">
                    <view class="left_date">申请时间：{{item.processDate}}</view>
                    <view class="left_detail">
                        <view style="display:flex;flex-direction: row;">{{item.perName}}-{{item.businessType == 'newAuth'? '新办':'续费'}}<view class="authStatus auth{{item.status}}">{{item.statusName}}</view>
                        </view>
                    </view>
                    <view class="left_addr">{{item.houseAddress}}-{{item.roomNumber}}</view>
                </view>
                <view class="orderInfo-right">
                    <view class="orderStatus{{(item.orderStatus ==2||item.orderStatus ==11) ? '2':'Q'}}">{{item.orderStatusName}}</view>
                    <view>￥{{item.amount}}</view>
                </view>
            </view>
            <view class="loadBox" hidden="{{dropDownType!=='2'}}" slot="list">
                <image class="img-icon" src="../../../images//svg/load.svg"></image> 加载中
            </view>
            <view class="loadBox" hidden="{{dropDownType!=='0'}}" slot="list">
                没数据了
            </view>
        </dropDown>

滚动到底部的时候就触发dropDown加载方法获取数据并拼接就好了

这篇关于微信小程序的分页加载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！