微信小程序之模板复用与上拉加载

最新推荐文章于 2024-07-03 23:23:33 发布

原创最新推荐文章于 2024-07-03 23:23:33 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序同时被 2 个专栏收录

4 篇文章

订阅专栏

上拉加载

1 篇文章

订阅专栏

本文介绍小程序中模板复用的方法及注意事项，并详细解析上拉加载更多数据的技术实现，帮助开发者提升用户体验。

一、模板复用

模板的适用场景

适应页面的展示，没有太复杂的逻辑交互的页面，可以存成模板，方便其他页面复用
通常模板页面：只有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()
  }