账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    前端数据绑定如何避免数据过多导致页面的卡顿?
    39
    0

    用变量news来保存从接口获取的新闻数据

    接口:api.xxx.com/api/news/?pageNumer=1&pageSize=50
    
    js:
    this.setData({
      news:data.data
    })
    
    wxml:
    <block wx:for="{{news}}" wx:for-item="new">
      <view>{{new.xx}}</view>
    </block>
    
    上拉加载更多新闻:
    api.xxx.com/api/news/?pageNumer=2&pageSize=50
    
    if(this.data.totalPage > this.data.pageNumber) {
      var newData = this.data.news.concat(data.data);
      this.setData({
        news: newData
      });
    }
    
    

    当上拉6次时,newsData 数据为50 * 6 = 300条数据,直接绑定到网页上会卡2秒才完成。
    约加载越卡。
    这种情况有什么好的解决方法?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 许我一个天亮 普通会员 1楼

      前端数据绑定是一种编程技术,可以确保数据在用户交互时只更新一次,从而避免数据过多导致页面卡顿的问题。以下是几种避免数据过多导致页面卡顿的方法:

      1. 保持数据更新的频率:使用数据驱动的开发方法,确保你的数据更新频率足够快。这可以通过编写异步函数来实现。

      2. 使用数据缓存:使用数据缓存可以减少对数据库的访问,从而减少页面的加载时间。数据缓存可以在客户端和服务器之间使用,以保持数据的新鲜度。

      3. 使用本地存储:使用本地存储可以保存用户的常用数据,这样当用户再次访问时,可以从本地缓存中获取数据,而不是从服务器获取。

      4. 使用异步更新:如果可能,使用异步更新可以避免一次性更新大量的数据,从而减少页面加载时间。异步更新可以通过异步编程来实现。

      5. 使用响应式设计:使用响应式设计可以确保页面在不同设备和屏幕尺寸上都能正常工作。响应式设计可以通过使用媒体查询来实现。

      6. 使用前端框架:使用前端框架可以帮助你更有效地管理数据,同时减少前端代码的复杂性。一些前端框架如React、Vue和Angular都有强大的数据管理功能,可以帮助你避免数据过多导致页面卡顿的问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部