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}}"