H5W3
当前位置:H5W3 > 其他技术问题 > 正文

mint-ui的tab-container和infinite scroll配合使用的时候出现bug

mint-ui的tab-container和infinite scroll配合使用会出现无线触发加载的问题,切换到第一个container第二个第三个就会无限加载,切换到第二个第一个和第三个就会无限加载·····大家都是怎么解决的,一个滑动所有的都会乱套
<mt-tab-container-item id=”1″>

            <ul     class="list-ul"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    infinite-scroll-distance="10">
                <li class="list-li" v-for="item in list">
                </li>
            </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <ul     class="list-ul"
                    v-infinite-scroll="loadMore1"
                    infinite-scroll-disabled="loading1"
                    infinite-scroll-distance="10">
                <li class="list-li" v-for="item in list1">
                    
                </li>
            </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <ul     class="list-ul"
                    v-infinite-scroll="loadMore2"
                    infinite-scroll-disabled="loading2"
                    infinite-scroll-distance="10">
                <li class="list-li" v-for="item in list2">
                    
                </li>
            </ul>
        </mt-tab-container-item>
        
        
        

回答:

在Infinite-Scroll里面,添加一个v-if=selected == id,把Infinite-scroll和选项卡的id、selected相结合,选中的selected与id对应的时候,才进行对应的Infinite-Scroll。
Infinite-Scroll的代码如下:
<div v-infinite-scroll=”loadMore”
infinite-scroll-disabled=”loading”
infinite-scroll-distance=”10″
class=”content”
v-if=”selected == 1″

根据需要,v-if的条件进行修改

本文地址:H5W3 » mint-ui的tab-container和infinite scroll配合使用的时候出现bug

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址