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


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 相关文章推荐
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 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
PHP array操作10个小技巧分享
2011/06/23 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
javascript 播放器 控制
2007/01/22 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python自动化生成IOS的图标
2018/11/13 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python实现像awk一样分割字符串
2020/09/15 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
空指针到底是什么
2012/08/07 面试题
自我评价怎么写正确呢?
2013/12/02 职场文书
安全教育心得体会
2013/12/29 职场文书
理财投资建议书
2014/03/12 职场文书
旷课检讨书500字
2014/10/14 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle