问答

列表滚动到底部,另外一个也会滚动到底部

作者:admin 2021-09-25 我要评论

div class="weui-tab" style="margin-top:15px;" div class="weui-navbar" a class="weui-navbar__item weui-bar__item--on border-right" href="#tab1" @click=...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

<div class="weui-tab" style="margin-top:15px;">

  <div class="weui-navbar">
    <a
      class="weui-navbar__item weui-bar__item--on border-right"
      href="#tab1"
      @click="settabactive(0)"
    >引进项目</a>
    <a class="weui-navbar__item border-right" href="#tab2" @click="settabactive(1)">在建项目</a>
    <a class="weui-navbar__item border-right" href="#tab3" @click="settabactive(2)">达产项目</a>
    <a class="weui-navbar__item" href="#tab4" @click="settabactive(3)">扶持项目</a>
  </div>
  
  <div class="weui-tab__bd">
    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
      <LoadMore :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">
        <div v-for="(item,i) in introductions" :key="i" class="myline">
          <wxLedger
            :PrjName="item.name"
            :State="item.constructionStatus"
            :Id="item.code"
            :clickItem="clickItem"
          ></wxLedger>
        </div>
      </LoadMore>
    </div>
    <div id="tab2" class="weui-tab__bd-item">
      <LoadMore :onLoadMore="onLoadMore2" :enableLoadMore="enableLoadMore2">
        <div v-for="(item,i) in constructions" :key="i" class="myline">
          <wxLedger
            :PrjName="item.name"
            :State="item.constructionStatus"
            :Id="item.code"
            :clickItem="clickItem"
          ></wxLedger>
        </div>
      </LoadMore>
    </div>
    <div id="tab3" class="weui-tab__bd-item">
      <LoadMore :onLoadMore="onLoadMore3" :enableLoadMore="enableLoadMore3">
        <div v-for="(item,i) in reachs" :key="i" class="myline">
          <wxLedger
            :PrjName="item.name"
            :State="item.constructionStatus"
            :Id="item.code"
            :clickItem="clickItem"
          ></wxLedger>
        </div>
      </LoadMore>
    </div>
    <div id="tab4" class="weui-tab__bd-item">
      <LoadMore :onLoadMore="onLoadMore4" :enableLoadMore="enableLoadMore4">
        <div v-for="(item,i) in supportProjectList" :key="i" class="myline">
          <wxLedger
            :PrjName="item.F_QYMC"
            :State="item.INST_STATUS_"
            :Id="item.ID_"
            :clickItem="clickItem_zdfc"
          ></wxLedger>
        </div>
      </LoadMore>
    </div>
###

看你贴上来的代码你想表达的是一个Tab选项卡的切换。
在第一个列表滚动到底部之后,切换到第二个选项卡也是滚动到底部了?

但是我不知道你显示内容的部分是怎么去展现的,这个需要你把代码补全的。
我只能猜测两种情况:

  • 一种可能是Key值重复了,
  • 另外一种,就是你滚动的容器有可能是同一个。

新增:

我贴两个解决方式吧,偷个懒用了 VueJS

1.jpg
此方法会重置所有面板的滚动条,
切换后不保存滚动条进度

2.jpg
此方法会记录不同面板的滚动条状态,
切换回面板后(A -> B -> A)会恢复到之前滚动的位置

###

这种问题是很少会有人回答你的,建议重新整理问题,站在旁观者的角度描述问题、突出重点、必要时还请贴出更详细的代码以及你浏览器运行的结果。

###

在切换后把滚动条重新定位过去

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 列表滚动到底部,另外一个也会滚动到底

    列表滚动到底部,另外一个也会滚动到底

  • slot中间添加

    slot中间添加

  • 关于git远程登录

    关于git远程登录

  • Macintosh OS 安装swoole

    Macintosh OS 安装swoole

腾讯云代理商
海外云服务器