收藏
回答

scroll-view 造成dom元素过多页面消失?

页面可左右滑动 下滑刷新 ;后端请求数据正常bbsList:140条

但是wxml仅能显示50条数据 再次下滑无页面未填充 setdata正常真机调试如下

  此为wxml代码

<swiper current="{{currentTab}}bindchange="swiperChangeduration='300class="tab-content">

    <swiper-item wx:for="{{categoryLists.length}}wx:key="this">

      <scroll-view scroll-y="truebindscrolltolower="toLowFunclass="scoll-h">

        <view wx:for="{{bbsList}}wx:for-item="bbswx:key="bbs">

          <view class="item-ans">

            <view class="expertInfo">

              <view class="review-item-head">

                <view class="review-item-head-lf lm26 color-333">

                  <image class="review-avatarbindtap="linkToIndDefenderOfFranceexDetailInfodata-id="{{bbs.userManage.identity == 2 || bbs.userManage.identity == 1 ? '':bbs.userManage.id}}src="{{bbs.userManage.headPic==''?avatarDefault:bbs.userManage.headPic}}mode="aspectFill"></image>

                </view>

                <view class="review-avatar-rightbindtap="linkToBbsDetaildata-id="{{bbs.id}}">

                  <view class="title">

                    {{bbs.userManage.loginCode}}

                    <block wx:if="{{bbs.userManage.identity == 1}}space="ensp">

                      <text class="color-999style="margin-left:15rpx;">会员</text>

                    </block>

                    <block wx:if="{{bbs.userManage.identity == 2 && bbs.userManage.bodyguardType == ''}}space="ensp">

                      <text class="color-999style="margin-left:15rpx;">教师</text>

                    </block>

                    <block wx:else space="ensp">

                      <text class="color-999style="margin-left:15rpx;">{{bbs.thingsClassify.classifyIdentity}}</text>

                    </block>

                    <text class="color-999style="margin-left:220rpx;">{{bbs.time}}</text>

                  </view>

                  <view class="control">

                    <block wx:if="{{bbs.readNum > 0 }}space="ensp">

                      <image style="width:38rpx;height:38rpx; src="../../images/yanjing.pngmode="aspectFill" />

                      <text class="color-999style="margin-left:5rpx;">{{bbs.readNum}}</text>

                    </block>

                  </view>

                </view>

              </view>

              <view class="center">

                <view class="article">

                  <view class="pay-hint-content {{bbs.showMore?'ellipsis':'unellipsis'}}">

                    {{bbs.explain}}

                  </view>

                  <view style="color: #1da39a;wx:if='{{bbs.explain.length > 100}}bindtap="linkToShowMoreExplaindata-id='{{bbs.id}}data-showMore='{{bbs.showMore}}'>

                    {{bbs.showMore ? '显示更多':'收起'}}

                  </view>

                </view>

              <view class="bottom">

                <view class="btn-leftbindtap="linkToBbsDetaildata-id="{{bbs.id}}">

                  <image class="" style="width:30rpx;height:28rpx;margin-top:15rpx;src="{{baseImgUrl}}yingshixiangq_fenxiang.pngmode="aspectFill" />

                  <block wx:if="{{bbs.forwardNum != 0}}space="ensp">

                    {{bbs.forwardNum}}

                  </block>

                  <block wx:else space="ensp">

                    转发

                  </block>

                </view>

                <view class="btn-leftbindtap="linkToBbsDetaildata-id="{{bbs.id}}">

                  评论

                  <block wx:if="{{bbs.replyNum != 0}}space="ensp">

                    {{bbs.replyNum}}

                  </block>

                </view>

                <view class="btn-leftbindtap="zandata-bbsid='{{bbs.id}}data-tapStatus='{{bbs.tapStatus}}'>

                  <block wx:if="{{bbs.praiseNum != 0}}space="ensp">

                    <image class="" style="width:32rpx;height:28rpx;margin-top:15rpx;src="{{bbs.tapStatus==1?isZan:noZan}}mode="aspectFill" /> {{bbs.praiseNum}}

                  </block>

                  <block wx:else space="ensp">

                    <image class="" style="width:32rpx;height:28rpx;margin-top:15rpx;margin-right:5rpx;src="{{bbs.tapStatus==1?isZan:noZan}}mode="aspectFill" />

                  </block>

                </view>

              </view>

            </view>

          </view>

        </view>

      </scroll-view>

    </swiper-item>

  </swiper>

不知该如何优化。。。

最后一次编辑于  2020-04-20
回答关注问题邀请回答
收藏

2 个回答

  • Admin ²º²³
    Admin ²º²³
    2020-04-20

    应该是元素太多停止渲染了。这个多了,就算不白屏也会变慢。用长列表组件代替吧。性能好,建议用:

    recycle-view | 微信开放文档

    https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

    2020-04-20
    有用 1
    回复 3
    • 肖申克儿
      肖申克儿
      2020-04-20
      感谢 我试下
      2020-04-20
      回复
    • 肖申克儿
      肖申克儿
      2020-04-21
      createRecycleContext 对象listobj append有遇到这个问题这是啥意思
      2020-04-21
      回复
    • 音凉
      音凉
      2020-12-22
      每个都不规则就用不了长列表组件,有没有好的解决办法
      2020-12-22
      回复
  • 祺爸💎
    祺爸💎
    2020-04-20

    这个真厉害了🐂🍺

    --↓↓👍点击“有用”是回答的动力哦

    2020-04-20
    有用
    回复
登录 后发表内容
问题标签