标签：阿里云 bottom get ppi etc 方法 code css scene
首先，这是个真实的案例，我大兄弟在深圳开汽修店铺，但需要系统来管理日常经营活动，这正不是我擅长的吗？
说干就干，直接后端+web端+移动端来一套，于是紧急赶工，起早摸黑，产出约3万行总量代码，此系统与工作无关，
纯属个人业余开发，所以我敢拿来任意剖析，如果有时间我就出个连载，做一些典型的技术解析。这次说下移动端开发，
考虑到适配和多端问题，还有效率原因，我选择了混合模式，即原生做壳，H5+CSS做内容展现，JS代码实现逻辑，
然后用第三方工具打包生成移动App，我们来看下懒加载模式。
准备：
Idea2019.03/Gradle6.0.1/JDK11.0.4/Lombok0.28/SpringBoot2.2.4RELEASE/mybatisPlus3.3.0/Soul2.1.2/Dubbo2.7.5
/Mysql8.0.11/Vue2.5/OSS/Hbuilder2.6.1
难度： 新手--战士--老兵--大师
目标：
1.前端展现数据懒加载实现
步骤：
为了遇见各种问题，同时保持时效性，我尽量使用最新的软件版本。代码地址：https://github.com/xiexiaobiao/vehicle-shop-mobile.git
后端代码量约1.5万，双前端约1.5万，技术还是很具代表性的，不然就不好意思拿出来说事了，详细可看Git库说明，下图是后端代码量分析：
Web管理界面：
手机端：使用Hbuilder编码，Uniapp框架，再随手捡了几个UI拿来大改了几下，基本形状如下：
比如上图中商品页和订单列表页，数据流量还是很大的，因为里面参杂了图片，如果一上来就一股脑全加载，再搞个前端缓存假分页加载，那你得考虑下用户的
感受！以此需要懒加载，或者叫渐进式加载，必须得结合后端物理分页实现。
思路：后端物理分页，前端首次进页面，先请求一次后端并加载到页面，后续操作中页面滑到底后自动触发后续加载并请求后端，将返回数据累加到前端缓存数组，
再加载到页面，直到数据全部完毕。
首先定义后端(有点不规范，把数据处理写在controller层，没来得及优化)：
com.biao.shop.stock.controller.ShopItemController:
@GetMapping("/item/list")
public ObjectResponse<Page<ShopItemEntityDto>> listItem(@RequestParam("pageNum") int current, @RequestParam("pageSize")int size,
@RequestParam(value = "itemName",required = false) String itemName,
@RequestParam(value = "itemUuid",required = false)String itemUuid,
@RequestParam(value = "category",required = false) String category,
@RequestParam(value = "brandName",required = false)String brandName,
@RequestParam(value = "shipment",required = false) Integer shipment){
int shipmentTemp = Objects.isNull(shipment)? 2: shipment;
// 这里的shipment最好设计为int，可以接收 0 1 2 ，boolean型，只能是0 1，前端传来都会自带默认0，导致无法查询无此条件限制的
Page<ShopItemEntityDto> pageInfo = shopItemService.listItem(current,size,itemName,itemUuid,category,brandName,shipmentTemp);
ObjectResponse<Page<ShopItemEntityDto>> response = new ObjectResponse<>();
response.setCode(RespStatusEnum.SUCCESS.getCode());
response.setMessage(RespStatusEnum.SUCCESS.getMessage());
response.setData(pageInfo);
return response;
}
以上代码是controller层，具体后端服务实现我就省略了，请看Git源码，返回给web端是个简单的统一返回封装，
ObjectResponse{"code":200,"message":"SUCCESS","data":{Object}}，其数据就是Page类型，具体是MybatisPlus中的
com.baomidou.mybatisplus.core.metadata.Ipage， 包含了数据总量，当前页数和每页的量，来个例子就是下面这样的：
{"code":200,"message":"SUCCESS","data":{"records":[{"idItem":2,"itemUuid":"SP000011","category":"修理","classification":null,"itemName":"雨刮器","sellPrice":60.99,"purchasePrice":45.99,"brandName":"奔驰系列","description":"奔驰系列","shipment":null,"alertQuantity":5,"specification":"35*35cm","unit":"支","picAddr":"https://biao-aliyun-oss-pic-bucket.oss-cn-shenzhen.aliyuncs.com/images/logo-samll.png","stock":null,"sales":null,"discountPrice":null}],"total":23,"size":500,"current":1,"orders":[],"searchCount":true,"pages":1}
那前端就是先定义一个初始请求的量，初始页值必须为 1，然后是每次懒加载的页面数据量，这里有个很隐蔽的地方，
必须保证首次懒加载的页面数据量填满屏幕，否则无法触发屏幕触底上滑加载：
pages\product\list.vue文件
data() { return { // 分页实现页面懒加载 pageInfo:{ "total": 0, "size": 6, // 每次懒加载的页面数据量 "current":1// 首次请求的初始页值，之后每请求一次就累加 1 }, ... }
每次请求数据的方法封装一下：
requesForData:function(){ Request().request({ url:‘stock/vehicle/stock/item/list‘, method: ‘get‘, header:{}, params: { ‘pageNum‘: this.pageInfo.current, ‘pageSize‘: this.pageInfo.size, }, } ).then( res => { let pdtArr = res.data.records; this.goodsList = this.goodsList.concat(pdtArr); // 懒加载机制 --> 加载一次后累加页数 this.pageInfo.total = res.data.total; this.pageInfo.current += 1; } ).catch(err => { console.error(‘is catch‘, err) this.err = err; });
以上代码中，要实现懒加载机制，需每次加载一次后累加当前页数，另外使用Array.concat函数，追加到已有的数组后面，这样懒加载基本就成型了！
方法一：uniapp页面有个自带的钩子：
//加载更多 onReachBottom(){ console.log("onReachBottom") this.loadData(); },
方法二：页面模板中的scroll-view元素，加上@scrolltolower事件函数:
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" :refresher-enabled = "false" >
同时配合：
<uni-load-more :status="tabItem.loadingType"></uni-load-more>
当然，必须有个指示器，告知数据是否全部完毕了， 在loadData方法中最后加一个判断：
//判断是否还有数据， 有改为 more， 没有改为noMore if(this.pageInfo.total > (this.pageInfo.current-1) * this.pageInfo.size){ navItem.loadingType = ‘more‘; }elseif(this.pageInfo.total <= (this.pageInfo.current-1) * this.pageInfo.size){ navItem.loadingType = ‘noMore‘; }
收工结束！
全文完！
我的其他文章：
只写原创，敬请关注
标签：阿里云 bottom get ppi etc 方法 code css scene
原文地址：https://www.cnblogs.com/xxbiao/p/12452009.html
