四时宝库

程序员的知识宝库

小程序上拉到底部分页加载更多内容功能特效



以下基本框架

<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判断是否要清空原有内容,当搜索关键词有新内容时,要清空原有文章列表。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接