以下基本框架
<scroll-view class='container' scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<!-- 搜索框 -->
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" value="{{keys}}" bindinput="bindKeyInput" placeholder="请输入搜索内容" />
</view>
</view>
<!-- 搜索按钮,调用搜索查询方法 -->
<view class="weui-search-bar__cancel-btn" bindtap='search'>{{cancelValue}}</view>
</view>
<view class="goodsList carts-list">
<view wx:for="{{article}}" wx:key="objectId" class="carts-item" data-object-id="{{item.id}}" bindtap="tapGoods">
<!-- 缩略图 -->
<image class="carts-image" mode='widthFix' src="{{imgurl}}{{item.img}}" />
<view class="carts-text">
<!-- 商品标题 -->
<text class="carts-title">{{item.title}}</text>
<view class="carts-subtitle">
<text class="goods-score">{{item.intro}}</text>
</view>
</view>
</view>
</view>
<view wx:if="{{pageEnd==true}}" class='scrollEnd'>已显示所有数据...</view>
</scroll-view>
以下代码执行到底部事件操作,执行获得数据,頁码加一,不个存当前頁码,等返回数据时统一保存,以提高执行速度。
//模拟加载数据
onScrollLower: function() {
var that = this;
if (!that.data.pageEnd)
{
that.getarticle(that.data.categoryId, that.data.pageIndex+1, that.data.keys,false);
wx.showNavigationBarLoading();
setTimeout(() => {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}, 1200);
}
以下代码执行获得新数据,并合并操作
getarticle: function (sortMode, pageIndex, keys,clear) {
var that = this;
request.req(uri, {
sortMode: sortMode,
keys: keys,
CurrentPage:pageIndex,
PageSize:2
}, (err, res) => {
var newslist = res.data;
if (that.data.article.length>0)
{
if (newslist.length==0)
{
that.data.pageEnd=true;
}
else
{
that.data.pageEnd=false;
if (clear)
{
that.data.article=newslist;
}
else
{
for (var i = 0; i < newslist.length; i++) {
that.data.article.push(newslist[i])
}
}
}
}
else
{
that.data.article=newslist;
}
that.setData({
article: that.data.article,
pageIndex:pageIndex,
pageEnd:that.data.pageEnd
});
});
}
以上操作,要判断原内容是否为空,新内容是否为空,为空说明以到最后一頁,以后不再执行拉到底请求数据,clear判断是否要清空原有内容,当搜索关键词有新内容时,要清空原有文章列表。