当前位置：首页 > Web前端 > CSS

好快，1分钟开发一个下拉刷新，滚动加载列表

时间：2023-03-31 02:00:16 CSS

好快，1分钟写一个下拉刷新，滚动加载自动分页列表前言欢迎来到BUIWebapp专栏或bui超快微信公众号。上一篇：2019开发最快的Webapp框架--BUI交互框架微信Webapp开发各种异常路由需求及解决方案！【BUI实战篇】BUI数据驱动拼图游戏Webapp移动端适配版，基于vuejs拼图游戏改造webapp结合Dcloud平台打包图文教程一张脑图看懂BUIWebapp移动端快速开发框架【上篇】——框架及工具、资源1.观看实战视频点击观看视频记录安装好以下环境后，从0到1，一步步教程，你也可以做到！2、开发准备，安装buijscli命令行工具（需要先安装node环境，推荐node8.x）；如何安装和使用buijs？安装bui-fast快速编辑器插件（推荐vscode）；如何安装和使用bui-fast？打开跨域chrome浏览器；如何打开跨域Chrome浏览器？三、开发过程使用buijs搭建项目1.创建Webapp项目buijscreatedemo2.安装依赖cddemo/npminstallwindows推荐淘宝的cnpminstall3.运行预览npmrundev使用bui-fast编辑器插件生成控件视频使用vscode安装插件中可以找到bui-fast.xxx假设生成控件名称规则一：在html中，使用ui-xxx生成控制结构ui-list生成如下结构

在js中，使用bui-xxx生成控件的初始化代码bui-list生成如下初始化代码//列表控件js初始化：varuiList=bui.list({id:"#uiList",url:"http://rap2api.taobao.org/app/mock/84605/example/getNews",pageSize:5,data:{},//如果页面的字段名不同，按字段重新定义字段:{page:"page",size:"pageSize",data:"data"},callback:function(e){}，模板：函数（数据）{varhtml="";data.forEach（函数（el，索引）{html+=`

${el.name}${el.address}

${el.distance}公里

￥${el.price}`});返回网页;}});保存会自动预览4.从bui.list看自动分页的设计原理常用参数说明：id用于绑定url和结构体数据请求的地址数据数据请求需要列表的高度heightofthepage从哪一页开始请求pageSize返回多少条数据field字段映射模板根据返回的数据渲染自定义模板，支持es6模板回调为每一行添加点击事件，如下拉刷新时点击跳转到onRefresh触发回调onLoad向上滚动到达底部时触发回调1、滚动和自动分页的原理滚动的第一个元素是高度。当内容超过容器高度时，会产生滚动条，可以监听id的scroll事件，知道是否滚动到底部。2、为什么有时会有多个请求？这里我们首先要解决的问题就是高度，所以我们可以传入height参数，默认为0，如果为0，会自动计算出列表页面的剩余高度。有了高度之后，我们需要计算请求返回的数据是否可以展开容器。如果没有，我们会自动请求下一页，直到容器展开，所以你会看到pageSize设置的值变小了，页面就会发起第二次请求，就是这个道理。3、如何知道返回的数据在哪个字段？我们来看看这个接口返回了哪些数据？http://rap2api.taobao.org/app/mock/84605/example/getNews这是淘宝的mock模拟接口，随机返回数据，返回一个带有{data:[],info:"",status:的数据““}结构。{data:[{uid:6801,name:"与载团比较",image:"http://dummyimage.com/200x134/4A7BF7&text=Thumbnail",phone:"17612327699",location:"惠城区",price:“65”，距离：“52”，状态：1，日期：“2003-06-28”，网址：“gopher://brcce.cq/svku”，电子邮件：“v.dmdtjgv@rwldcexzt.bi”，时间:"20:39:53",address:"海南省三沙市西沙群岛",detail:"年初，政府新设部门，但工作交给尹长征markme八说之前用大元见过江菜，一开始他很擅长拼军容，开发材料和技术，炼制北酸矿花第一方方方方方方她。"}],info:"Obtainedsuccessfully",status:0}那么问题来了？不管界面的规则是后台设置的还是前端设置的，控件都不知道界面的事先规则.如果规则有限，那么很多如果先开发界面，再学习移动开发，你还会选择bui框架吗？看看有没有少参数？field字段配置就是数据请求的字段映射。比如我请求的接口地址是http://rap2api.taobao.org/app/mock/84605/example/getNews，大写的PAGES用来请求页码，PAGESIZES用来请求大小每个页面；那么字段配置应该是：{page:2,pageSize:20,field:{page:"PAGES",size:"PAGESIZES"}}那么接口请求就是http://rap2api.taobao.org/app/mock/84605/example/getNews?PAGES=2&PAGESIZES=20;这样接口就可以正常请求corres了堆数据，那么请求返回后如何知道数据在哪个字段呢？也是在字段的data参数中配置的；{page:2,pageSize:20,field:{page:"PAGES",size:"PAGESIZES",data:"data"}}如果返回的数据是多层嵌套怎么办？例如return{result:{data:[{uid:6801,name:"与载团比较",image:"http://dummyimage.com/200x134/4A7BF7&text=Thumbnail",phone:"17612327699",location:"惠城区",价格:"65",距离:"52",状态:1,日期:"2003-06-28",url:"gopher://brcce.cq/svku",email:"v.dmdtjgv@rwldcexzt.bi",time:"20:39:53",address:"海南省三沙市西沙群岛",detail:"石世忠集团月刊何政治部每次我去找公子，原著却已经交给殷长征标记我了。八曰，其用大元前，乃见江菜之道。起初，他很擅长为自己的军事形象而战。以栽培材料技术为重点，精制北酸中元。再加上七团一直活跃在两个水矿，一线党党和她。"}],},info:"获取成功",status:0}那么我们要找出数据返回的数组字段在哪里？可以这样配置{page:2,pageSize:20,field:{page:"PAGES",size:"PAGESIZES",data:"result.data"}}4.怎么知道已经到最后一页了，我们来操作一下新生成的控件，看看是否有更多的内容在最下面，那么怎么知道是不是最后一页呢？通过返回数组的大小与你请求的每一页的大小进行比较，如果小于pageSize设置的值，则认为是最后一页最后一页。其实就是bui。一般要求ajax+bui.scroll+bui.pullrefresh几个控件集成在一起，这样我们就可以解决数据接口+控件集成，也可以从中提取一个控件业务，通过简单的配置，可以满足很多开发需求五、注意事项接口请求必须返回一个数组才能操作rate，非数组请使用bui.scroll控件；如果自动高度计算不准确，需要自己计算并告诉它；如果是restful接口，需要在接口设置中允许这种问号形式的传参；

上一篇：ES6中Iterator和Generator

下一篇：网页布局实用技巧：flex主轴自动外边距

好快，1分钟开发一个下拉刷新，滚动加载列表相关文章

最新推荐

猜你喜欢