微信小程序列表懒加载

coderW

于 2018-12-11 09:39:52 发布

阅读量5.8k

点赞数

分类专栏：小程序 wepy 文章标签： wepy 小程序懒加载

本文链接：https://blog.csdn.net/coderW/article/details/84839934

版权

本文介绍了如何在基于wepy的微信小程序项目中实现列表的懒加载。由于找不到合适的插件，作者根据小程序API，特别是onReachBottom和onPullDownRefresh，结合.sync修饰符进行了自定义实现，并且实现了防抖处理。内容分为子组件和父组件两部分进行讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于wepy的项目需要实现小程序的列表懒加载
没找到合适的微信小程序懒加载插件,找的资料基本都是图片懒加载,于是自己实现
小程序API档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
主要基于onReachBottom和onPullDownRefresh两个API,使用前请认真阅读文档
wepy中动态传参需要用到.sync修饰符
已做防抖处理

一、子组件

<template>
  <view class="ChildComponents " @tap="enterDetails">
  	{
   {
   itemData.title}}
  	{
   {
   itemData.content}}
  </view>
</template>

<script>
  import wepy from 'wepy';

  export default class ChildComponents extends wepy.component {
   
    props = {
   
      itemData: {
   
        type: Object,
        default: {
   
          id: '',
          title: '标题',
          content:'内容',
        }
      },
    };

    methods = {
   
    	//点击跳转到某个小程序页面
      enterDetails() {
   
        let id=this.itemData.id*1;
        if (!isNaN(id) && typeof id === 'number') {
   
          wx.navigateTo({
   
            url: 'miniProPage?id=' + id
          });

最低0.47元/天解锁文章