一、模板复用
- 模板的适用场景
适应页面的展示,没有太复杂的逻辑交互的页面,可以存成模板,方便其他页面复用
通常模板页面:只有wxml,css,触发的逻辑要在父级页面来实现
- 如何定义使用模板
第一步:定义模板
定义步骤同创建普通页面一样
<template name="定义的模板名称">
这里放普通的wxml标签
</template>
第二步:使用模板
在需要的页面中引入:
<import src="指定要引入的模板路径" />
在嵌入位置添加template来指定
<template is="指定模板名称" data="{{ 指定要传入的数据}}"></template>
其中:
is:要引入的模板name名称
参考文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html
二、上拉加载
作用分析
- 产品角度:提升用户体验
- 技术角度:后台接口支持分页
返台接口:{page:当前页码,pageSize:每页显示几条,start:起始偏移量}
- 实现方式
//触底生命周期
onReachBottom() {
console.log('onReachBottom');
if(!this.data.flag) {
this.data.page++;
this.getGoods()
}
}
//加载商品列表
getGoods() {
let {categoryId,page,pageSize}=this.data;
let tempArr=[];
getGoodsList({categoryId,page,pageSize})
.then(res=>{
console.log('商品列表结果:',res);
if(res.code===0) {
tempArr=this.data.goodsArr.concat(res.data)
this.setData({
goodsArr:tempArr
})
}else if(res.code===700) {
this.setData({
flag:true
})
}
})
}
onShow() {
//自动加载商品列表
this.getGoods()
}