好快, 1分钟写好下拉刷新,滚动加载自动分页列表
一、观看实操视频点击观看视频实录
安装完以下环境后, 从0到1, 手把手教, 你也可以做到!
二、开发准备
安装
buijscli命令行工具(需要先安装node环境, 建议使用node 8.x);如何安装使用buijs?
安装
bui-fast快速编辑器插件(推荐vscode);如何安装使用bui-fast?
打开跨域的chrome浏览器;
如何打开跨域的Chrome浏览器?
三、开发过程
使用 buijs 构建工程
1.创建Webapp工程
2.安装依赖
windows 推荐使用淘宝的
cnpm install
3.运行预览
使用bui-fast编辑器插件生成控件
视频里使用的是vscode 可以在安装插件那里找到 bui-fast.
xxx 假设为控件名
生成规则1:
在html里, 使用
ui-xxx生成控件结构
生成以下结构
在js里, 使用
bui-xxx生成控件的初始化代码
生成以下初始化代码
保存就会自动预览
四、从bui.list看自动分页设计原理
常用参数说明:
id 用来跟结构绑定
url 数据请求的地址
data 数据请求需要
height 列表的高度
page 从第几页开始请求
pageSize 要返回多少条数据
field 字段映射
template 根据返回的数据, 渲染自定义模板,支持es6模板
callback 为每一行添加一个点击事件,比方点击跳转
onRefresh 下拉刷新的时候触发回调
onLoad 上拉滚动到底部的时候触发回调
1. 滚动自动分页原理
滚动的第一要素就是高度, 当内容撑出容器的高度,才会产生滚动条, 才能监听id的滚动事件, 可以知道是否已经滚动到底部, 到底部则自动发起新一页的请求.
2. 为何有时候会请求多次?
这里我们需要解决的第一个问题,就是高度, 所以我们可以传height参数,默认是0, 为0,则会自动计算列表的页面剩余高度.
有了高度以后, 我们要计算请求返回的数据能不能撑开容器, 如果不行, 则自动请求下一页, 直到容器被撑开, 所以你会看到pageSize 设置的值较小的时候, 页面会发起第2次请求, 就是这个原因.
3. 如何知道返回的数据在哪个字段?
我们来看一下这个接口返回的数据是什么?
http://rap2api.taobao.org/app/mock/84605/example/getNews
这个是淘宝的mock模拟接口,随机返回数据, 返回一个
{data:[],info:"",status:""}结构的数据.
那么问题来了? 不管接口的规则是后端还是前端定的, 控件并不事先知道接口的规则, 如果把规则限定死了, 那很多先开发接口再来学习移动端开发的还会选择bui框架吗?
我们来看看有没有漏了什么参数?
field 字段配置
这个就是用来做数据请求的字段映射, 比方, 我请求的接口地址是http://rap2api.taobao.org/app/mock/84605/example/getNews, 请求第几页是用的大写 PAGES请求每页的大小 是用的 PAGESIZES; 那么 field 的配置应该为:
那么接口就会请求为 http://rap2api.taobao.org/app/mock/84605/example/getNews?PAGES=2&PAGESIZES=20; 这样接口就能正常请求到对应的数据了, 那请求到以后的数据返回回来, 怎么知道数据在什么字段呢? 同样也是在field的 data 参数里面配置;
如果返回的数据是嵌套多个层级呢? 比如返回
那么我们就要找到该数据返回的数组字段在哪里? 你可以这样配置.
4. 如何知道已经到最后一页了?
我们操作一下刚刚生成的控件, 会看到底部有没有更多内容字样, 那怎么知道是否是最后一页了呢? 通过返回的数组大小, 跟你请求的每页大小做比对, 如果小余pageSize设置的值, 则认为已经是最后一页了.
实际上就是把 bui.ajax+bui.scroll+bui.pullrefresh几个控件的通用需求整合在一块, 这样我们就可以解决数据接口+控件整合, 又能抽离业务的一个控件. 通过简单配置,我们可以满足很多开发需求.
五、注意事项
对于接口的请求必须返回数组才能操作, 非数组请使用
bui.scroll控件;如果高度自动计算不准确, 需要自行计算好告诉它;
如果是restful接口, 需要在接口设置允许这种问号传参的形式;