小程序分页实践之编写可复用分页组件


Posted in Javascript onJuly 18, 2019

项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用。

组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟):

小程序分页实践之编写可复用分页组件

源码可以查看:wxapp-pagination

项目需求

具体项目需求:

  • 查看自己相关的会议(页面命名为 meetings)
  • tab切换,分为:
    • “我的会议”(我参加的会议,后面会以 "join" 为 key区分)
    • “我的预约”(我预约的会议,后面会以 "book" 为 key区分)
  • 一次加载10条(size=10),拉到底部后,加载下一页(page = page +1)

当然,作为前端,要考虑性能方面的需求:

  • 首次只加载默认tab页的首页,其他tab等到点击到对应tab才开始加载。
  • 回到已加载过的tab页,保留原数据不重新加载。

所以原型图大概就长这样:

小程序分页实践之编写可复用分页组件

逻辑实现

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

├── components
│    ├── meeting-item   # 列表item
│    └── pagination      # 分页组件
├── model
│  └── user.js          # 我的相关 model
└── pages
│    └── user            # 我的相关页面
│    ├── meetings    # 我的会议(就是tab要分页的页面啦)
│    └── ...
│
└── vant-weapp

还是用图理一下他们之间的关系吧:

小程序分页实践之编写可复用分页组件

在组件内监听触发分页事件

触发分页的事件是滚动到页面的底部,小程序中,触发该事件是Page页面的onReachBottom事件,但是这个事件只能在Page中触发,所以要将这个触发时机传递给pagination组件。

解决思路是:组件 pagination 内,设置key属性,每当onReachBottom事件触发之后,设置组件属性 key  为一个随机字符串,当组件 pagination 监听到key的变化的时候,做出分页操作。

// components/pagination/index.js
Component({
 properties: {
  key: {
   type: String,
   observer: '_loadMoreData' // _loadMoreData 为分页操作
  }
 }
})
<!-- pages/user/meetings/index.wxml -->
<tabs active="{{currentTab}}" bind:change="onChange">
  <tab title="我的会议" data-key="{{type['JOIN']}}">
   <view class="meeting-list">
     <pagination 
      name="JOIN"
      key="{{joinKey}}" 
     >
     </pagination>
   </view>
  </tab>

  <tab title="我的预约">
   <view class="meeting-list">
    <pagination 
     name="BOOK"
     key="{{bookKey}}"
    >
    </pagination>
   </view>
  </tab>
</tabs>
Page({
 onReachBottom(){
  const key = scene[+this.data.currentTab].key // 对应tab对应key
  this.setData({
   [key]: random(16)
  })
 }
})

分页组件的实现逻辑

触发到达底部之后,需要加载数据。但再加载之前,先满足加载的条件:

  • 上一页还未加载完成(loading = true),不重复加载
  • 当前页面全部加载完(ended = true),不继续加载

具体加载流程为:

  1. page:触发 onReachBottom 事件,修改 pagination组件 key 值
  2. component: key值监听到变化,触发加载事件 _loadMoreData
  3. component: _loadMoreData 中判断满足条件后,触发加载列表函数 this.triggerEvent('getList'),并传入页面参数page 和 size。
  4. page:向model层获取数据。
  5. page:获取数据后,传递给 pagination组件list和total 值。
  6. component:list 监听到变化,判断是否加载完成。

component

// components/pagination/index.js
Component({
 properties: {
  name: String,
  key: {
   type: String,
   observer: '_loadMoreData' // _loadMoreData 为分页操作
  },
  size: { // 每次加载条目数
   type: Number,
   value: 10
  },
  total: Number, // 页面总数
  list: {         // 已加载条目
   type: Array,
   observer: '_endState'   // 每次加载完新数据,判断数据是否全部加载完成
  }
 },

 data: {
  page: 0,        // 当前第几页
  loading: false, // 是否正在加载
  ended: false  // 数据是否已全部加载完成
 },
 
 methods: {
  _loadMoreData(){
   const { loading, ended, size } = this.data
   if (loading) return // 上一页还未加载完成,不加载
   if (ended) return  // 当前页面全部加载完,不加载
   const page = this.data.page + 1

   this.setData({
    loading: true, // 开始加载新页面loading设置为true
    page
   })
   // 触发加载下一页,并传入参数
   this.triggerEvent('getList', {
    page,
    size
   })
  },
  _endState(val, oldVal) {
   const { total, list } = this.properties
   let ended = false
   // 判断数据是否全部加载完成
   if (list.length >= total) {
    ended = true
   }
   this.setData({
    loading: false, // 当前页面加载完成,loading设置为false
    ended
   })
  }
 }
})

page

<!-- pages/user/meetings/index.wxml -->
<pagination 
 name="BOOK"
 key="{{bookKey}}"
 bind:getList="getBookMeetings"
 list="{{bookMeetings}}"
 total="{{bookTotal}}"
>
</pagination>

循环列表item

pagination组件获取了可循环的列表,初始想法是循环slot,但是在slot中却获取不到 item 对象:

<view wx:for="{{list}}" wx:for-item="item" wx:key="index">
 <slot></slot>
</view>

解决的办法是将每个列表项封装为组件,循环抽象节点,这样对其他页面的分页具有可拓展性。

componentGenerics 字段中声明:

// components/pagination/index.json
{
 "componentGenerics": {
  "selectable": true
 },
 // ...
}

使用抽象节点:

<!-- components/pagination/index.wxml -->
<view wx:for="{{list}}" wx:for-item="item" wx:key="index">
  <selectable item="{{item}}"></selectable>
</view>

指定“selectable”具体是哪个组件:

<!-- pages/user/meetings/index.wxml -->
<pagination 
 generic:selectable="meeting-item"
  // ... 其他属性
>
</pagination>

对应 json 文件定义对应 usingComponents :

// pages/user/meetings/index.json
{
 "usingComponents": {
  "pagination":"/components/pagination/index",
  "meeting-item":"/components/meeting-item/index"
 }
}

meeting-item 组件接收一个属性 item,这样在 meeting-item 组件中,就可以获取到循环列表的item值,并正常绘制页面。

实现切换懒加载

给pagination添加initImmediately属性,当initImmediately为true时,首次加载页面,并用变量 initState标记是否已经初始化页面过。

// components/pagination/index.js
Component({
 properties: {
  initImmediately: {
   type: Boolean,
   value: true,
   observer: function(val){
    if (val && !this.data.initState) {
     this.initData()
    }
   }
  },
  // ...
 },
 data: {
   initState: false, // 是否已经加载过
   // ...
 },
 lifetimes: {
  attached: function () {
   if (this.data.initImmediately){
    this.initData()
   }
  },
 },
 methods: {
  initData(){
   console.info(`${this.data.name}:start init data`)
   this._loadMoreData()
   this.setData({
    initState: true
   })  
   },
  // ... 
   _endState(val, oldVal) {
   if (!this.data.initState) return 
   // ...
   },
 }
})

当currentTab为当前类型的时候,initImmediately 设置为 true。

<!-- pages/user/meetings/index.wxml -->
<pagination 
  name="JOIN"
  init-immediately="{{currentTab==type['JOIN']}}"
  // ...
>
</pagination>

<pagination 
  name="BOOK"
  init-immediately="{{currentTab==type['BOOK']}}"
  // ...
>
</pagination>

组件的复用

完成了以上组件,在对其他分页的页面,可以直接复用。比如,实现一个获取全部用户列表的分页,只需要新增一个user-item的组件,像这样调用:

<pagination 
 name="USER"
 key="{{key}}" 
 bind:getList="getUserList" 
 list="{{userList}}" 
 total="{{userTotal}}"
 generic:selectable="user-item"
>
</pagination>

具体应用可以查看我写的小demo:wxapp-pagination。

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

Javascript 相关文章推荐
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
在vue项目中使用sass语法问题
Jul 18 #Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 #Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 #Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 #Javascript
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
使用react context 实现vue插槽slot功能
Jul 18 #Javascript
You might like
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python生成验证码实例
2014/08/21 Python
python实现中文分词FMM算法实例
2015/07/10 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python 重定向获取真实url的方法
2018/05/11 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
大学班级计划书
2014/04/29 职场文书
公司联欢会策划方案
2014/05/19 职场文书
群教班子对照检查材料
2014/08/26 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
家长学校教学计划
2015/01/19 职场文书
老龙头导游词
2015/02/11 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server