V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tinzing
V2EX  ›  Vue.js

关于小程序 swiper 做长列表性能问题

  •  
  •   tinzing · 2022-06-24 16:52:21 +08:00 · 2088 次点击
    这是一个创建于 884 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在有个需求就是小程序(uniapp 做的)首页分类导航可以左右滑动,对应的内容列表也跟着滑动变,所以用 swiper 实现。问题来了,用 swiper 做出来后 数据一多就很卡,根本用不了。 问问大家你们有做过这样的需求吗?怎么解决性能问题的?

    14 条回复    2022-06-25 16:10:04 +08:00
    GKD
        1
    GKD  
       2022-06-24 17:07:38 +08:00
    计算滚动条位置,把视窗外的列表隐藏掉。用一个空的 div 占位。
    wangtian2020
        2
    wangtian2020  
       2022-06-24 17:12:27 +08:00
    小程序卡不是很正常吗,uni 哎批批卡那更正常了
    是要有多少数据就会卡啊,可以用性能调试工具看看性能消耗在什么地方。css 开销大就尝试减小图片分辨率,代码开销大应该不至于。列表一次性渲染太多就虚拟列表动态添加。
    自带的组件卡就自己实现


    https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
    mxT52CRuqR6o5
        3
    mxT52CRuqR6o5  
       2022-06-24 17:12:31 +08:00
    swiper-item 有个 skip-hidden-item-layout 属性
    mxT52CRuqR6o5
        4
    mxT52CRuqR6o5  
       2022-06-24 17:14:15 +08:00
    微信小程序文档里有说 swiper-item 有个 skip-hidden-item-layout 属性
    uniapp 不清楚,按照道理是可以用的吧,你可以试试,不过其他平台的 swiper 的类似功能的 api 可能会不一样
    ifdef
        5
    ifdef  
       2022-06-24 17:15:14 +08:00
    借楼问一下,现在啊有不用做小程序的前端岗位啊?
    tinzing
        6
    tinzing  
    OP
       2022-06-24 17:16:59 +08:00
    @GKD 好复杂的样子
    tinzing
        7
    tinzing  
    OP
       2022-06-24 17:17:27 +08:00
    @mxT52CRuqR6o5 我看了 也有,我试试
    tinzing
        8
    tinzing  
    OP
       2022-06-24 17:18:30 +08:00
    @wangtian2020 几百条数据就开始掉帧了,自己实现的话能力有限
    wangtian2020
        9
    wangtian2020  
       2022-06-24 17:26:45 +08:00
    @ifdef 大公司的前端比较专精(前端人数>3 )。小公司像我大前端,vue3 、electron 、threejs 、cordova 啥都上,明知 uniapp 一坨,领导叫我糊我就糊。小程序跟网页开发一样的,就是恶心点
    ifdef
        10
    ifdef  
       2022-06-24 17:29:29 +08:00
    @wangtian2020 #9 哭哭,小程序都快把我对前端的兴趣磨灭了
    renmu123
        11
    renmu123  
       2022-06-24 17:34:46 +08:00 via Android
    @tinzing 几百条你要考虑一下需求问题了
    jones2000
        12
    jones2000  
       2022-06-24 20:48:46 +08:00
    左右滑动直接一个页面的快照图一贴, 等手势停止了在渲染具体页面数据。
    w88975
        13
    w88975  
       2022-06-25 00:00:40 +08:00
    @ifdef 用 taro 根本没这种烦恼 100%特性的 react hook 写小程序很爽
    zhuweiyou
        14
    zhuweiyou  
       2022-06-25 16:10:04 +08:00
    @w88975 看到 taro 那 800+issues 就不敢用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6010 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 03:18 · PVG 11:18 · LAX 19:18 · JFK 22:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.