小程序滚动加载优化方案

发布于2023年6月22日 15:32:33 ,最后一次修改于2023年11月17日 12:25:28

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

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

使用

  1. 安装组件
npm i mini-scrolling-loading --save
  1. 在页面的 json 配置文件中添加 mini-scrolling-loading 自定义组件的配置
{
  "usingComponents": {
    "mini-scrolling-loading": "mini-scrolling-loading/index",
    "scrolling-item": "/components/scroll-item/index"
  }
}

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

组建.wxml

{{item.title}}

组建.ts

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

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


mini-scrolling-loading属性介绍

字段名 类型 必填 默认值 描述
api Function - API接口请求Promise函数
page Number 1 分页
perpage Number 10 页码
perpageKey String perpage 分页参数字段,例如pageSize
idKey String id 能代表唯一标识的字段名
resKey String data 接口返回的data路径
totalKey String total 数据量总数
query Object {} 查询额外字段参数
height String 100vh 可视容器高度
itemHeight number 40 单个Item高度,单位px
enUpper Boolean false 开启下拉刷新
success Function { totalCount: number, data: []} api 请求成功返回
error Function - api请求失败回调
delSuccess Function - 删除成功回调
sprops Object {} 抽象节点的props集合
sEvent Function - 抽象节点派发事件委托

Demo

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

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

虚拟列表原理图示

虚拟列表

https://i.imgur.com/wbODRGR.png

Demo

demo

https://i.imgur.com/vRi9SfG.gif

分页删除数据无刷新图示

删除元素

https://i.imgur.com/3NfXmrV.png

外部样式

类名 描述
custom-class 根结点样式

slot

name 描述
loading 加载中
loading-finish 加载结束
empty 暂无数据占位

方法

通过 selectComponent 可以获取到 mini-scrolling-loading 实例并调用实例方法。

方法名 参数 返回值 介绍
refreshData - - 刷新列表
getResData - object[] 获取接口返回值
getResTotal - number 获取总数

备注

针对抽象子组件如果设计业务交互逻辑较为复杂,因微信抽象节点功能限制,不建议使用此组件去实现。

Github地址

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

本文共 21 个回复

  • ZcmYkXbPpRyet 2023/07/19 04:53

    raepbyYJzICouKVw

  • aSnXvrbiqQKtmzFc 2023/08/15 22:47

    fupsGUCYg

  • FeULtaVzGD 2023/08/15 22:48

    PAMdrzjs

  • QPCIVWbrdOHLtpq 2023/10/05 14:20

    HKXzMeuhlBd

  • zaWoGXgRvnlEfixY 2023/10/05 14:21

    BfDVYcblPnpJ

  • SlpyPvMYX 2023/10/05 14:22

    xUNAJiLKu

  • RcZpvUJY 2024/03/22 17:58

    wFqJcsdyego

  • NtaUHLyZKCWkRmdp 2024/08/29 23:50

    QNzRLeJGFcgWh

  • أنابيب الحديد الزهر 2024/09/23 11:12

    Copper-Nickel Pipes in Iraq Elite Pipe Factory provides copper-nickel pipes that are known for their excellent corrosion resistance and durability, making them ideal for marine and industrial applications. These pipes are crafted with precision to meet the high demands of various industries. As one of the most trusted and reliable manufacturers in Iraq, Elite Pipe Factory ensures that our copper-nickel pipes deliver superior performance and longevity. For more details, visit elitepipeiraq.com.

  • wool product 2024/11/14 16:28

    Hi there! Do you know if they make any plugins to assist with Search Engine Optimization? I'm trying to get my site to rank for some targeted keywords but I'm not seeing very good gains. If you know of any please share. Thank you! You can read similar blog here: Eco product

  • ken levy kla 2024/11/15 23:12

    If a flight has been delayed, what can help a pilot make up for lost time within the air?

  • tlovertonet 2024/11/20 08:24

    Excellent site. Plenty of useful info here. I’m sending it to several friends ans also sharing in delicious. And obviously, thanks for your sweat!

  • جهاز قياس وزن الشاحنة العراق 2024/11/23 11:41

    Bwer Company is a top supplier of weighbridge truck scales in Iraq, providing a complete range of solutions for accurate vehicle load measurement. Their services cover every aspect of truck scales, from truck scale installation and maintenance to calibration and repair. Bwer Company offers commercial truck scales, industrial truck scales, and axle weighbridge systems, tailored to meet the demands of heavy-duty applications. Bwer Company’s electronic truck scales and digital truck scales incorporate advanced technology, ensuring precise and reliable measurements. Their heavy-duty truck scales are engineered for rugged environments, making them suitable for industries such as logistics, agriculture, and construction. Whether you’re looking for truck scales for sale, rental, or lease, Bwer Company provides flexible options to match your needs, including truck scale parts, accessories, and software for enhanced performance. As trusted truck scale manufacturers, Bwer Company offers certified truck scale calibration services, ensuring compliance with industry standards. Their services include truck scale inspection, certification, and repair services, supporting the long-term reliability of your truck scale systems. With a team of experts, Bwer Company ensures seamless truck scale installation and maintenance, keeping your operations running smoothly. For more information on truck scale prices, installation costs, or to learn about their range of weighbridge truck scales and other products, visit Bwer Company’s website at bwerpipes.com.

  • weighbridge truck scales in Baghdad 2024/11/29 19:45

    BWER Company is committed to advancing Iraq’s industrial sector with premium weighbridge systems, tailored designs, and cutting-edge technology to meet the most demanding applications.

  • truck scale price in Iraq 2024/11/30 08:19

    BWER sets the standard for weighbridge excellence in Iraq, offering innovative, reliable systems and dedicated support to ensure optimal performance and client satisfaction.

  • Honey Singapore 2024/12/04 06:45

    Hi there, I think your blog may be having browser compatibility problems. When I look at your web site in Safari, it looks fine however, when opening in I.E., it has some overlapping issues. I just wanted to give you a quick heads up! Apart from that, wonderful blog.

  • walk in tattoo shops, best tattoo shop near me 2024/12/04 09:00

    After looking into a few of the blog posts on your web page, I truly appreciate your way of blogging. I saved it to my bookmark webpage list and will be checking back soon. Please check out my website too and tell me how you feel.

  • poocoin 2024/12/04 11:36

    I quite like reading through an article that can make men and women think. Also, many thanks for allowing for me to comment.

  • Slottica Casino 2024/12/04 14:25

    Your style is really unique in comparison to other people I've read stuff from. I appreciate you for posting when you've got the opportunity, Guess I'll just book mark this blog.

  • Daily Maid 2025/08/22 06:16

    Executive-level cleaning, exactly what discerning clients need. Premium service premium results. High-end excellence.

  • Sylvester Jakubiak 2025/08/22 11:03

    With rain coming sideways across Commencement Bay, hidden drip‑edge flashing stops water from sneaking behind the fascia and into your attic insulation. Annual tune‑ups are available; we flush, reseal corners and adjust hangers so your system keeps working even after the roughest winter freeze–thaw cycles. Our team uses hidden screw‑in hangers that lock gutters to the rafter tails, outclassing the rusty spike-and-ferrule setups you still see on too many older homes.

回复 poocoin 取消