分页过程中,通过 wx:for绑定数据,绑定的item数量太多会导致 不渲染
发布于 5 年前 作者 lei47 1861 次浏览 来自 问答

当数据超过1000条以后,JS不管如何变化,追加数据,前端不继续自动渲染

    
  that.setData({

            conList: that.data.conList.concat(data.rows), //分页数据追加

            pageCount: data.pageCount,

            pageMax: (that.data.pageIndex >= data.pageCount ? true : false),

            pageIndex: that.data.pageIndex + 1,

          });



<view class="mrow" wx:for="{{conList}}">
  <view wx:if="{{item.churu=='入'}}" >
    <image class="imgIco" src="{{item.Src}}" bindtap="openInfo" data-id="{{item.uid}}"></image> 
    <view class="fxtxt green">[进入]</view>
  </view>

  <view wx:if="{{item.churu=='出'}}"> 
     <image class="imgIco" src="{{item.Src}}" bindtap="openInfo" data-id="{{item.uid}}"></image>    
     <view class="fxtxt orange">[离开]</view>
  </view>

  <view class="data">
    <view class="hov" bindtap="openInfo" data-id="{{item.uid}}"> 
      <view class="user">{{item.UserName}}<text class="smalltxt">({{item.Tel}})</text>  </view>
      <view class="tel">{{item.tiwen}}</view>
    </view>
    <view class="hov" wx:if="{{item.chepai}}" > 
      <view class="user">{{item.chepai}}   </view> 
    </view>

    <view class="note" wx:if="{{item.Address}}">
      常住地址:{{item.Address}}
    </view>
    <view class="note" wx:if="{{item.danwei}}">
      工作单位:{{item.danwei}}
    </view>

        
    <view class="note" wx:if="{{item.jiankang}}">
      健康状况:{{item.jiankang}}
    </view>
    
   <view class="note" wx:if="{{item.qzJCS=='是'}}">
       有过接触过疑似或确诊患者。 
    </view>

  <view class="note" wx:if="{{item.hbHCS=='是'}}"> 
        有过接触过来自湖北的人员。
    </view>

      <view class="note" wx:if="{{item.hbLY=='是'}}"> 
        有过在湖北经停或逗留。
    </view>

    <view class="note" wx:if="{{item.chufadi}}">
      出发地:{{item.chufadi}}
    </view>

    
    <view class="note" wx:if="{{item.mudidi}}">
      目的地:{{item.mudidi}}
    </view> 

    <view class="note" wx:if="{{item.Note}}">
      出入事项:{{item.Note}}
    </view> 

    <view>
      <text class="lineDate">  {{item.CreateDate}}  </text>

       <text class="lineDate"  wx:if="{{item.crType=='放行'}}">  【已确认通行】  </text>
    </view>

    <view class="btnGroup">
      <view class="fullView"></view> 
         <view class="btn" wx:if="{{item.crType!='放行'}}" data-index="{{index}}" bindtap="fangxing" data-id="{{item.id}}"> 通行 </view>

      <!-- <view class="btn" wx:if="{{type=='小区'&&item.ccid==null}}" bindtap="spUser" data-uid="{{item.uid}}"> 小区业主 </view> -->

      <view class="btn" wx:if="{{item.ccid==null}}" bindtap="spUser" data-uid="{{item.uid}}"> 通过审核 </view>
    </view>

  </view>
</view>

3 回复

恩,我测试是700多条记录的时候会停止渲染。这个时候手机也会卡顿了

所以建议控制在这个数目以下,超过的截断处理。

或者用官方专门的长列表组件recycle-view(性能提升很多,但是开发成本稍高。另外感觉目前还有些许不尽人意的地方)

感谢各位大神 看来的确是元属上限导致的

这是一个日志查看的功能,而且本身数据更新很频繁,通过清空上一页办法解决不是太好

还是研究一下recycle-view 去实现,,谢谢各位了

小程序对页面的元素是有上限的,多数据可以看下这个:https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

回到顶部