微信小程序之加载更多(分页加载)实例

本文介绍了微信小程序中实现加载更多的分页加载功能。当用户滚动到底部时,通过调用接口并递增页码来获取更多数据。利用`bindscrolltolower`事件监听滚动到底部的行为,动态更新数据并渲染视图。示例代码包含wxml、wxss和js部分,实现了列表的分批加载。
摘要由CSDN通过智能技术生成

1.业务需求:列表滚动到底部时,继续往上拉,加载更多内容
2.必传参数:
(1)page: 1 //第几次加载
(2)limit: 5//每次加载的显示数据条数
(3)total: null //需要返回数据的个数
3.其他参数:
根据接口的传所需参数
4.实现原理:
当第一次访问接口时,传递三个必备参数和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来。在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把“上拉加载”显示在列表底部;否,则没有数据可取,并把“没有更多”显示在列表底部,同时把“上拉加载”隐藏掉。
当用户已经滚动到列表底部(这里使用到小程序提供的scroll-view组件的bindscrolltolower事件),触发bindscrolltolower事件,参数page+1,再把必传参数和其他参数(需要搜索的字符串)给后台,后台把其余的数据返回给前台,前台在原来数据的基础上添加数据。
代码示例如下:
wxml:

<!--pages/test/test.wxml-->
<view class="search">
  <view class="search-bar">
    <view class="search-wrap">
      <icon type="search" size="16" class="icon-search" />
      <input type="text" placeholder="请输入搜索内容" class="search-input" bindinput="bindKeywordInput" value="{
    {searchValue}}" bindfocus="bindinput" />
    </view>
    <view class="search-cancel" bindtap="keywordSearch">搜索</view>
  </view>
  <view class="parkExplain">以下为资讯搜索的结果</view>
  <!-- 资讯搜索结果展示 -->
  <view class="informationView">
    <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower" class="newsListView">
      <view class="newsList clearfix" wx:for="{
    {newsList}}" 
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值