本文共 1085 字，大约阅读时间需要 3 分钟。

WeUI 列表加载优化方案

实现思路

本方案通过对列表的显示方式进行控制，实现了默认显示2条记录，点击【查看更多】显示全部记录，并支持点击【收起】还原默认显示的功能。以下是详细的实现方法：

WXML 实现代码

     
        
     
    
           
      
      
      
       {   {   nickname{   {idx}}  }
          
         
     
    
           
      
      
      
       {   {   item.amount}}  
          
       
    
   
     
        
     
    
     
      收起
         
       
      
        
     
    
     
      查看更多
         
       
    
   

JavaScript 代码

// 数据结构data: {  showMore: false,  rankList: [], // 内容数据通过接口获取},// 方法listToggle: function() {  this.setData({    showMore: !this.data.showMore  });}

CSS 样式

.hiddenmore .more-item {  display: none;}.showmore .more-item {  display: -webkit-box;  display: -webkit-flex;  display: flex;}

功能说明

• 默认显示：列表初始显示2条记录，用户可以通过点击【查看更多】查看全部记录。
• 查看更多：点击按钮后，若有更多记录，列表将展开显示剩余内容。
• 收起功能：点击【收起】按钮可还原为默认显示的2条记录，方便用户切换查看方式。

通过以上方法，用户可以在不影响页面性能的情况下，灵活控制列表的展现方式，提升用户体验。