微信小程序滚动分页加载优化方案_微信小程序列表滚动数据源加载

mini-scrolling-loading组件

微信小程序滚动加载拓展组件，对官方方案进行了以下优化：

• 减少重复去写分页加载函数和分页逻辑
• 支持长列表虚拟渲染
• 优化删除子项无刷新交互

使用

1. 安装组件

npm i mini-scrolling-loading --save
1

2. 在页面的 json 配置文件中添加 mini-scrolling-loading 自定义组件的配置

{
  "usingComponents": {
    "mini-scrolling-loading": "mini-scrolling-loading/index",
    "scrolling-item": "/components/scroll-item/index"
  }
}
1
2
3
4
5
6

scrolling-item(组建名可自定义)组建为开发者自定义的列表单个item样式组建，mini-scrolling-loading采用抽象节点方式进行渲染，例如：

组建.wxml

<view class="scroll-view-item" catchtap="delItem" mark:id="{{item.id}}">{{item.title}}</view>
1

组建.ts

Component({
    properties: {
        item: Object  // 变量名需使用item
    },
    methods: {
        delItem(e: { mark: { id: number}}) {
            const {id} = e.mark
            this.triggerEvent('delItem', {id}) // 如果有使用删除，在删除成功后，需派发delItem事件，传入删除的主键id即可，组建会无刷新更新列表。
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11

3.WXML 文件中引用 mini-scrolling-loading

<mini-scrolling-loading generic:sitem="scrolling-item" perpage="{{20}}" api="{{getData}}"></mini-scrolling-loading>
1

mini-scrolling-loading属性介绍

Demo

用微信开发者工具导入以下代码片段：

https://developers.weixin.qq.com/s/r4BBrfmF7NIF
1

虚拟列表原理图示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uy25Alkn-1684226192576)(https://github.com/WGinit/mini-scrolling-loading/blob/master/src/assets/del-item.png)]

Demo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwgBX47g-1684226192577)(https://github.com/WGinit/mini-scrolling-loading/blob/master/src/assets/virtual-demo.gif)]

分页删除数据无刷新图示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LqOZZDzx-1684226192578)(https://github.com/WGinit/mini-scrolling-loading/blob/master/src/assets/virtual.png)]

外部样式

slot

Github地址

https://github.com/WGinit/mini-scrolling-loading