微信小程序实现瀑布流分页滚动加载

本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下

两种分页方式

普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般

另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果

以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中

实现思路

滚动分页的方式存在一个问题,当用户滚动的非常快时,可能会导致第一次请求还未完成,第二次请求就开始了,为了避免这个问题,我们可以加入一个锁标识,发送一次请求后加锁,请求完成后释放锁,这样就可以完美避免这种问题

得出实现思路

1、判断是否还有可加载的数据
2、获取锁
3、发送请求,调用接口
4、释放锁
5、返回数据

代码实现

首先我们需要一个paging对象

class Paging{
  page //记录当前页码
  count //记录一页显示的数量
  req //接口请求对象(此处我已封装,可按照自己需求定义属性)
  url //请求路径
  moreData = true //是否存在下一页数据(首次请求时默认存在下一页数据)
  accumulator = [] //已加载的数据列表
  locker = false //锁标识
}

为paging对象定义一个构造器,默认从第一页开始请求,每页五条数据

constructor(req, page=0, count=5){
    this.page = page
    this.count = count
    this.req = req
    this.url = req.url
  }

接下来编写getMoreData方法

getMoreData(){
 //1、判断是否存在下一页数据
 //2、获取锁,判断锁是否为释放状态
 //3、请求数据
 //4、释放锁
 }

1、判断是否存在下一页数据

这里直接获取moreData属性进行判断

if(!this.moreData){
      return
}

2、获取锁

此处新增一个方法,如果当前没有锁,代表可以继续请求数据,在请求数据前先把锁标识设置为true,防止下次请求继续发送

_getLocker(){
    if(this.locker){
      return false
    }
    this.locker = true
    return true
}

3、请求数据

我们需要返回给页面的数据结构如下:

{
        empty, //是否为空
        items, //当前页数据
        moreData, //是否存在下一页数据
        accumulator //已经请求过的所有数据
}

首先定义一个获取请求结构的方法

 _getCurrentReq(){
    let url = this.url
    //设置请求参数
    const params = `page=${this.page}&count=${this.count}`
    //判断拼接方式
    if(url.includes('?')){
      url += '&' + params
    }else{
      url += '?' + params
    }
    this.req.url = url
    return this.req
 }

获取数据的方法如下:

 _actualGetData(){

    const req = this._getCurrentReq() //获取到具体的请求内容

    let paging = Http.request(req) //调用自定义工具中的请求方法,进行数据的获取

    //如果没有获取到结果直接返回null
    if(!paging){
      return null
    }

    if(paging.total === 0){
      return {
        empty: true,
        items: [],
        moreData: false,
        accumulator: []
      }
    }

    //如果当前页码数小于总页码数表示还存在下一页数据,设置moreData为true,否则设置为false
    this.moreData = pageNum < totalPage-1 ? true : false

    //如果存在下页数据,将page+1,便于下次的获取
    if(this.moreData){
      this.page += 1
    }

    //因瀑布流显示数据需要累加展示,所以数据列表也需要累加
    this.accumulator = this.accumulator.concat(paging.items)
    return{
      empty: false,
      items: paging.items,
      moreData: this.moreData,
      accumulator: this.accumulator
    }
 }

4、释放锁

释放锁直接将锁标识的状态改变即可

this.locker = false

getMoreData方法编写完毕,然后就可以在对应界面的js文件中进行调用了

在第一次进入界面时,需要自动调用一次,然后在用户每次触底时再次调用

initBottomSpuList(){
 //获取到paging对象
    const paging = new Paging({
      url: url
    })
    //将paging对象存入js的data中
    this.data.spuPaging = paging
    //调用方法
    const data = paging.getMoreData()
    if(!data){
      return
    }
    //重新加载瀑布流
    wx.lin.renderWaterFlow(data.items)
},

微信小程序有自带的触底时自动触发的函数,将方法调用的代码写入这个函数即可

onReachBottom: function () {
    const data = this.data.spuPaging.getMoreData()
    if(!data){
      return
    }
    //重新加载瀑布流
    wx.lin.renderWaterFlow(data.items)
}

至此,就可以实现瀑布流分页滚动加载的效果了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序通过js实现瀑布流布局详解

    前言 瀑布流 - 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接.如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版.但column-count: 2是左右两列排版,如果碰巧出现左边累计高度过多大于右边累计高度的话,右边会出现大片空白区域.点击前往 js(推荐): 判断左右两边的累计高度,那边的高度小,便往那边添加(需要动态获取节点元素的高度进行计算).下面用的就是此种方法: 准备工作 我们需要用到 a

  • web页面和微信小程序页面实现瀑布流效果

    小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的高度: 4).重新对图片进行定位 1.web页面瀑布流效果,先看效果图(瀑布流+无限滚动加载): 页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

  • 微信小程序实现滚动加载更多的代码

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个 4.滚动到底部绑定需要触发的事件 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

  • 微信小程序实现瀑布流布局与无限加载的方法详解

    前言 瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插件,轻松做出这样的布局形式.在微信小程序中,我们也可以做出这样的效果,不过由于小程序框架的一些特性,在实现思路上还是有一些差别的. 今天我们就来看一下如何在小程序中去实现这种瀑布流布局: 小程序瀑布流布局 我们要实现的是一个固定2列的布局,然后将图片数据动态加载进这两列中(而加载进来的图片,会

  • 微信小程序实现瀑布流分页滚动加载

    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页

  • 小程序实现瀑布流动态加载列表

    本文实例为大家分享了小程序实现瀑布流动态加载列表的具体代码,供大家参考,具体内容如下 最近业务需要做一个商城列表,就自己写了一个瀑布流来加载列表. 这个列表在很多地方都需要用到,就给写成组件,方便使用. 1.goodsBox.js代码 想法很简单,就是判断两列的高度,将数据插入低的一列. let leftHeight = 0,   rightHeight = 0; //分别定义左右两边的高度 let query; Component({   /**    * 组件的属性列表    */   pr

  • 微信小程序功能之全屏滚动效果的实现代码

    想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu

  • 微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 解决微信小程序scroll-view组件无横向滚动的问题

    微信开放文档中scroll-view组件的部分代码如下 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H demo-text-1"></vi

  • 微信小程序实现多行文字滚动

    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu

  • 微信小程序实现多行文字滚动效果

    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu

  • 微信小程序实现表格前后台分页

    微信小程序前台分页(样式可以根据自己实际需要调整),供大家参考,具体内容如下 直接上代码,这个其实也可以调整为后台分页,但是后面会写一个后台分页的例子,根据实际需要选择吧数据是写在data中没有调用url获取,实际可以修改 1.index.js // pages/tablePage/index.js Page({     /**      * 页面的初始数据      */      data: {     frontPage: false,//上一页 存在true,不存在false     n

  • 微信小程序云开发实现分页刷新获取数据

    本文实例为大家分享了微信小程序云开发分页刷新获取数据的具体代码,供大家参考,具体内容如下 利用云函数调用数据库,在云函数中分页调取数据.再在js中不断将新的数据拼接到旧数据中,在前端显示.初始只显示5条记录,下拉刷新即可获取更多. 首先在JS中,调用云函数,获取到后端的数据: /**  * 从数据库获取数据  */   getData(num=5,page=0){     wx.cloud.callFunction({       name:"dairyGetlist",  //云函数

随机推荐