lin-ui实现瀑布流的触底加载

触底加载效果

实现思路

触底加载更多的细节：

触底: 监测触底事件在触底之后执行一系列动作
加载数据: 在触底后需要向服务器请求数据，如果已经请求到了所有数据，应该不再发送请求。
加载状态: 请求数据的等待时间，需要更新状态为加载中，数据渲染完成后取消该状态的显示
数据渲染: 将请求到的数据显示在视图中
没有更多数据的提示

功能实现

1、数据结构

数据格式来源[风袖API文档](https://course.talelin.com/lin/sleeve/3 API：Banner.html)

{"total":1,"count":10,"page":0,"total_page":1,"items":[{"id":8,"title":"ins复古翠绿NoteBook","subtitle":"林白默默的掏出小本本，将她说的话一次不漏的记了下来。","img":"","for_theme_img":"","price":"29.99","discount_price":"27.8","description":null,"tags":"林白推荐","sketch_spec_id":"1","max_purchase_quantity":null,"min_purchase_quantity":null}]
}

2、产品的业务逻辑

//model/product.js
class product{static goods=[{id: 'P001',image: '/image/图灵.jpg',title: '长款系带风衣',describe: '柔软顺滑、上身挺括显瘦。',price: '888',delPrice: '666'}, //只留一个做展示];constructor() {this.total=product.goods.length}async getProductList({count=5,page=1}){this.count=count;this.page=page;this.total_page=Math.ceil(this.total/this.count);const start=(this.page-1)*this.count;const end=this.count*this.page;this.items=product.goods.slice(start,end);return new Promise(resolve => {resolve(this.getDataTemplate())})}getDataTemplate(){return{total:this.total,count:this.count,total_page:this.total_page,page:this.page,items:this.items}}
}
export {product
}

其中 getDataTemplate()对传入的数据进行格式上的封装,getProductList()方法则是实现分页的逻辑并将结果返回为一个Promise对象。

3、加载数据的确定

data: {loadingEnd: false,  // 是否loading完loading: false, // loading的状态products: [], // 展示的数据productModel: null, // Products类创建的对象模型currentPage: 1, // 当请求页的设置pageCount: 5, // 每页请求数据的数量}

4、初始第一页数据的加载

async onLoad(options) {const productModel = new product();const productList = await productModel.getProductList({count: this.data.count,page: this.data.currentPage});this.setData({productModel,products: productList});console.log(this.data.products);this.renderWaterFlow();},renderWaterFlow() {wx.lin.renderWaterFlow(this.data.products.items, false, () => {console.log('渲染成功')})},

进入页面在没有触发触底事件时，第一页的数据进行正常的显示。所以在onLoad生命周期中进行。
这里创建了product类的实例productModel方便后续向业务模型发送请求获取数据。紧接着调用该实例的getPorductList方法，并传入请求页与每页显示数据条数获取第一页的产品数据，并将其更新到data中,进行数据的接受。
最后调用lin-ui提供的瀑布流组件进行数据的渲染。

###5、触底加载更多数据

onReachBottom: function() {if (this.data.currentPage >= this.data.productModel.total_page) {this.setData({loadingEnd: true,loading: false,});} else {this.setData({loading: true,currentPage: this.data.currentPage + 1,});setTimeout(() => {this.getPageProductList()}, 2000)}},async getPageProductList() {const products = await this.data.productModel.getProductList({count: this.data.pageCount,page: this.data.currentPage});this.setData({products,});this.renderWaterFlow();},

onReachBottom是小程序提供的触底事件处理方法，我们可以将触底后需要做的操作放在此函数中运行。

首先判断了当前展示的数据是不是最后一页的数据：

如果是的话就不再进行数据的请求，并将loading组件显示出来，loading状态设为false，loadingEnd设为true,进行没有更多数据提示的相关展示。
如果当前展示的数据没有到最后一页，则应请求下一页数据，并将loading组件加载出来，loading状态为加载状态。这里使用setTimeout模拟了发送和接收请求这段等待的时间。

getPorductList方法里对（模拟的）后端进行了请求并做了数据设置，之后调用renderWaterFlow进行瀑布流的展示，在lin-ui瀑布流函数的回调中，同时也适用lin-ui提供的页底提示进行加载信息的提升。

注:使用组建实现页底提示可以使开发的过程变的高效和易用

6、组建的引用

{"usingComponents": {"l-demo": "/components/l-demo/index","water-flow": "/miniprogram_npm/lin-ui/water-flow/index","l-loadmore": "/miniprogram_npm/lin-ui/loadmore/index"}
}

lin-ui实现瀑布流的触底加载相关推荐

微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载三.分包加载什么是分包为什么要使用分包如 ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值
我们作为前端,平时遇到的一大类工作就是展现各种的数据,而列表就是其中一个基础而通用的形式,无论是像Google.百度这样的搜索引擎,到像Facebook.Twitter.掘金这样的用户社区,抑或是像美 ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
vue-infinite-scroll 实现触底加载
说明如果项目中需要实现触底加载,可以使用vue-infinite-scroll来实现. 安装通过下面的命令可以进行安装: npm install vue-infinite-scroll -S 配置 ...
Vue 列表懒加载触底加载
一.方法一描述:列表懒加载+节流效果图: 实现: 组件:LazyLoading <template><div class="lazy-list">< ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
uniapp触底加载
文章目录一.onReachBottom()函数首先,在page.json的style下设置然后在页面使用即可,与生命周期函数同一级别二.在子组件中使用滚动区域scrow-view触底加载 1. ...