为小程序的分页实践编写可重用的分页组件

在项目中，遇到了选项卡切换列表，每个选项卡都需要分页，分页的过程也差不多，所以我们想把分页打包成一个组件，方便应用。

组件的应用已经写成了一个小演示，效果如下图所示(数据是通过mock模拟的):

源代码可以查看：wxapp-分页

项目要求

具体项目要求：

查看自己的相关会议(页面名为meetings)标签页切换分为：“我的会议”(我参加的会议稍后用‘加入’区分)和“我的约会”(我预订的会议稍后用‘预订’区分)。一次加载10个项目(大小=10)。拉到底部后，加载下一页(。

只有默认标签页的第一页会被第一次加载，其他标签只有在对应的标签被点击后才会被加载。返回到加载的选项卡页面，并防止重新加载原始数据。原型图大概是这样的：

逻辑实现

与分页逻辑相关的项目结构如下：

组件 会议-项目#列表项 分页组件模型 用户. js #我的相关模型页面我的会议(也就是要通过tab分页的页面) .万特-维普，让我们用一个图表来梳理它们之间的关系：

监听组件中的分页触发事件

触发分页的事件是滚动到页面底部。在小程序中，触发分页的事件是page页面的onReactivation事件，但是这个事件只能在Page中触发，所以这个触发机会应该传递给分页组件。

解决方法是：在组件分页中设置key属性，每次触发onreshold事件时，将组件属性key设置为随机字符串。当分页组件监听到键的变化时，就会进行分页操作。

//组件/分页/index . js component({ properties : { key 3360 { type : string，observer 3360 ' _ loadmoredata '//_ loadmoredata是分页操作}})！-pages/user/meetings/index . wxml-Tab sactive=' { { current Tab } } ' bind : change=' onchange ' Tab title=' my meeting ' data-key=' { { type[' JOIN ']} ' view class=' meeting-list ' paging name=' JOIN ' key=' { { JOIN key } } '/paging/view/Tab Tab title=' my reservation ' view class=' meeting-list ' paging name=' book ' key=' { { book key } } '/data.currenttab]。key//对应的tab对应的是key this . setdata({[key]: random(16)})})分页组件的实现逻辑

触发器到达底部后，需要加载数据。但重装前，满足装载条件：

上一页尚未加载(加载=真)。不要重复加载当前页面(ended=true)。不要继续加载。具体加载过程如下：

Page:触发onReachBottom事件，修改分页组件的键值，监控键值的变化，触发load list函数this.triggerEvent('getList ')，在load event _ loadmoredata组件中判断满足条件后传入page参数page和size:_ loadmoredata。Page:从模型层获取数据。Page:获取数据后传递给分页组件的列表和总值。组件：list监控变化并判断加载是否完成。成分

//组件/分页/索引。jscomponent({ properties : { name : String，key: { type: String，observer : ' _ loadMoreData '/_ loadMoreData为分页操作}，size: { //每次加载条目数键入：数字，值： 10 },总计：数字，//页面总数list: { //已加载条目类型：数组，observer: '_endState' //每次加载完新数据，判断数据是否全部加载完成} }，data: { page: 0，//当前第几页loading: false，//是否正在加载ended: false //数据是否已全部加载完成}，方法： { _ LoadMoredata(){ const { loading，end，size }=this。数据if(加载)返回/上一页还未加载完成，不加载if (ended) return //当前页面全部加载完，不加载const page=这个。数据。第一页这个。setdata({ load : true，//开始加载新页面装货设置为真实页面}) //触发加载下一页，并传入参数this.triggerEvent('getList '，{ page，size }) }，_endState(val，oldVal) { const { total，list }=this。属性let ended=false//判断数据是否全部加载完成if(列表。length=total){ end=true }这。setdata({ load : false，//当前页面加载完成装载设置为false end })} })页面

！-页面/用户/会议/索引。wxml-分页名称=' BOOK ' key=' { { bookKey } } ' bind : getlist=' getBookMeetings ' list=' { { bookMeetings } } ' total=' { { bookTotal } } '/分页循环列表项目

页码组件获取了可循环的列表，初始想法是循环插槽，但是在狭槽中却获取不到项目对象：

视图wx : for=' { { list } } ' wx : for-item=' item ' wx : key=' index ' slot/slot/view解决的办法是将每个列表项封装为组件，循环抽象节点，这样对其他页面的分页具有可拓展性。

组件泛型字段中声明：

//组件/分页/index。JSON { '组件泛型' : { '选定' : true }，//.}使用抽象节点：

！-组件/分页/索引。wxml-view wx : for=' { { list } } ' wx : for-item=' item ' wx : key=' index '可选项=' { { item } } '/可选/view指定"可选"具体是哪个组件：

！-页面/用户/会议/索引。wxml-分页通用：可选=“会议项目”//.其他属性/分页对应数据文件定义对应使用组件：

//页面/用户/会议/索引。JSON { '使用组件' : { '分页' : '/组件/分页/索引'，'会议项' : '/组件/会议项/索引' } }会议项组件接收一个属性项目，这样在会议项目组件中，就可以获取到循环列表的项目值，并正常绘制页面。

实现切换懒加载

给页码添加立即开始属性，当立即开始为真实的时，首次加载页面，并用变量初始状态标记是否已经初始化页面过。

//组件/分页/index。jscomponent({ properties : { initimmediate : { type : Boolean，value: true，observer : function(val){ if(val！这个。数据。initstate){ this。initdata()} } }，//.}，data: { initState: false，//是否已经加载过//.}，生命时间： {附加：函数(){ if(this。数据。initimedialy){ this。init data()} }，方法： { init data(){ console。info(`$ { this。数据。名称} :开始初始化数据`)这一点._ loadMoreData()此。setdata({ initstate : true })}，//._endState(val，oldVal) { if(！this.data.initState)返回//.}, }})当currentTab为当前类型的时候，最初设置为真的。

！-页面/用户/会议/索引。wxml-分页名称=' JOIN ' init-立即=' { { CurrentTab==type[' JOIN ']} } '//.paging分页名称=' BOOK ' init-immediate=' { { CurrentTab==type[' BOOK ']} '//./分页组件的复用

以上组件已完成，可以直接在其他分页页面上重用。例如，要实现分页以获取所有用户列表，您只需要添加一个新的user-item组件，并这样调用它：

分页名称=' user ' key=' { { key } } ' bind : getlist=' getuser list ' list=' { { user list } } ' total=' { { user total } } ' generic 3360 selectable=' user-item '/分页可以用来查看我的小演示

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